How do I select an element that has a certain class

Question

My understanding is that using element class should allow for a specific element assigned to a class to receive different  styling  than the rest of the class  This is not a question about whether this should be used or not  but rather I m trying to understand how this selector is intended to work  From looking at a ton of examples on the internet  I believe the syntax is correct and do not understand why this is not working    Here is an example   CSS   h2       color  red      myClass       color  green     h2 myClass       color  blue      HTML    lt h2 gt This header should be RED to match the h2 element selector lt  h2 gt   lt div class  myClass  gt       lt h1 gt This header should be GREEN to match the class selector lt  h1 gt       lt h2 gt This header should be BLUE to match the element class selector lt  h2 gt   lt  div gt

User · Answer

The element class selector is for styling situations such as this    lt span class  large  gt   lt  span gt   lt p class  large  gt   lt  p gt    large       font-size 150   font-weight bold     p large       color blue      Both your span and p will be assigned the font-size and font-weight from  large  but the color blue will only be assigned to p   As others have pointed out  what you re working with is descendant selectors

User · Answer

h2 myClass is only valid for h2 elements which got the class myClass directly assigned   Your want to note it like this    myClass h2   Which selects all children of myClass which have the tagname h2

User · Answer

It should be this way   h2 myClass looks for h2 with class myClass  But you actually want to apply style for h2 inside  myClass so you can use descendant selector  myClass h2   h2       color  red      myClass       color  green      myClass h2       color  blue      Demo  This ref will give you some basic idea about the selectors and have a look at descendant selectors

User · Answer

h2 myClass refers to all h2 with class  myClass     myClass h2 refers to all h2 that are children of  i e  nested in  elements with class  myClass    If you want the h2 in your HTML to appear blue  change the CSS to the following    myClass h2       color  blue      If you want to be able to reference that h2 by a class rather than its tag  you should leave the CSS as it is and give the h2 a class in the HTML    lt h2 class  myClass  gt This header should be BLUE to match the element class selector lt  h2 gt

User · Answer

The CSS  first-child selector allows you to target an element that is the first child element within its parent   element first-child   style properties   table first-child   style properties

[html] How do I select an element that has a certain class?

Examples related to html

Examples related to css

Examples related to syntax

Examples related to css-selectors