CSS selector for first element with class

Question

I have a bunch of elements with a class name red  but I can t seem to select the first element with the class  red  using the following CSS rule    x000D   x000D   red first-child   x000D      border  5px solid red  x000D    x000D   lt p class  red  gt  lt  p gt  x000D   lt div class  red  gt  lt  div gt  x000D   x000D   x000D    What is wrong in this selector and how do I correct it   Thanks to the comments  I figured out that the element has to be the first child of its parent to get selected which is not the case that I have  I have the following structure  and this rule fails as mentioned in the comments    x000D   x000D   home  red first-child   x000D      border  1px solid red  x000D    x000D   lt div class  home  gt  x000D       lt span gt blah lt  span gt  x000D       lt p class  red  gt first lt  p gt  x000D       lt p class  red  gt second lt  p gt  x000D       lt p class  red  gt third lt  p gt  x000D       lt p class  red  gt fourth lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    How can I target the first child with class red

User · Answer

I am using below CSS to have a background image for the list ul li

_x000D_

#footer .module:nth-of-type(1)>.menu>li:nth-of-type(1){_x000D_
  background-position: center;_x000D_
  background-image: url(http://monagentvoyagessuperprix.j3.voyagesendirect.com/images/stories/images_monagentvoyagessuperprix/layout/icon-home.png);_x000D_
  background-repeat: no-repeat;_x000D_
}

_x000D_

<footer id="footer">_x000D_
  <div class="module">_x000D_
    <ul class="menu ">_x000D_
      <li class="level1 item308 active current"></li>_x000D_
      <li> </li>_x000D_
    </ul> _x000D_
  </div>_x000D_
  <div class="module">_x000D_
    <ul class="menu "><li></li>_x000D_
      <li></li> _x000D_
    </ul>_x000D_
  </div>_x000D_
  <div class="module">_x000D_
    <ul class="menu ">_x000D_
      <li></li>_x000D_
      <li></li>_x000D_
    </ul>_x000D_
  </div>_x000D_
</footer>

_x000D_

User · Answer

Since the other answers cover what s wrong with it  I ll try the other half  how to fix it   Unfortunately  I don t know that you have a CSS only solution here  at least not that I can think of   There are some other options though       Assign a first class to the element when you generate it  like this    lt p class  red first  gt  lt  p gt   lt div class  red  gt  lt  div gt    CSS    first red     border 5px solid red      This CSS only matches elements with both first and red classes    Alternatively  do the same in JavaScript  for example here s what jQuery you would use to do this  using the same CSS as above       red first   addClass  first

User · Answer

To match your selector  the element must have a class name of red and must be the first child of its parent   lt div gt       lt span class  quot red quot  gt  lt  span gt   lt  -- MATCH -- gt   lt  div gt    lt div gt       lt span gt Blah lt  span gt       lt p class  quot red quot  gt  lt  p gt   lt  -- NO MATCH -- gt   lt  div gt    lt div gt       lt span gt Blah lt  span gt       lt div gt  lt p class  quot red quot  gt  lt  p gt  lt  div gt   lt  -- MATCH -- gt   lt  div gt

User · Answer

This is one of the most well-known examples of authors misunderstanding how  first-child works  Introduced in CSS2  the  first-child pseudo-class represents the very first child of its parent  That s it  There s a very common misconception that it picks up whichever child element is the first to match the conditions specified by the rest of the compound selector  Due to the way selectors work  see here for an explanation   that is simply not true   Selectors level 3 introduces a  first-of-type pseudo-class  which represents the first element among siblings of its element type  This answer explains  with illustrations  the difference between  first-child and  first-of-type  However  as with  first-child  it does not look at any other conditions or attributes  In HTML  the element type is represented by the tag name  In the question  that type is p   Unfortunately  there is no similar  first-of-class pseudo-class for matching the first child element of a given class  One workaround that Lea Verou and I came up with for this  albeit totally independently  is to first apply your desired styles to all your elements with that class          Select all  red children of  home  including the first one     and give them a border       home  gt   red       border  1px solid red          then  undo  the styles for elements with the class that come after the first one  using the general sibling combinator   in an overriding rule          Select all but the first  red child of  home     and remove the border from the previous rule       home  gt   red    red       border  none      Now only the first element with class  red  will have a border   Here s an illustration of how the rules are applied    lt div class  home  gt     lt span gt blah lt  span gt           lt  --  1  -- gt     lt p class  red  gt first lt  p gt    lt  --  2  -- gt     lt p class  red  gt second lt  p gt   lt  --  3  -- gt     lt p class  red  gt third lt  p gt    lt  --  3  -- gt     lt p class  red  gt fourth lt  p gt   lt  --  3  -- gt   lt  div gt     No rules are applied  no border is rendered  This element does not have the class red  so it s skipped  Only the first rule is applied  a red border is rendered  This element has the class red  but it s not preceded by any elements with the class red in its parent  Thus the second rule is not applied  only the first  and the element keeps its border  Both rules are applied  no border is rendered  This element has the class red  It is also preceded by at least one other element with the class red  Thus both rules are applied  and the second border declaration overrides the first  thereby  undoing  it  so to speak    As a bonus  although it was introduced in Selectors 3  the general sibling combinator is actually pretty well-supported by IE7 and newer  unlike  first-of-type and  nth-of-type   which are only supported by IE9 onward  If you need good browser support  you re in luck   In fact  the fact that the sibling combinator is the only important component in this technique  and it has such amazing browser support  makes this technique very versatile     you can adapt it for filtering elements by other things  besides class selectors    You can use this to work around  first-of-type in IE7 and IE8  by simply supplying a type selector instead of a class selector  again  more on its incorrect usage here in a later section    article  gt  p          Apply styles to article  gt  p first-of-type  which may or may not be  first-child       article  gt  p   p          Undo the above styles for every subsequent article  gt  p       You can filter by attribute selectors or any other simple selectors instead of classes  You can also combine this overriding technique with pseudo-elements even though pseudo-elements technically aren t simple selectors    Note that in order for this to work  you will need to know in advance what the default styles will be for your other sibling elements so you can override the first rule  Additionally  since this involves overriding rules in CSS  you can t achieve the same thing with a single selector for use with the Selectors API  or Selenium s CSS locators   It s worth mentioning that Selectors 4 introduces an extension to the  nth-child   notation  originally an entirely new pseudo-class called  nth-match     which will allow you to use something like  nth-child 1 of  red  in lieu of a hypothetical  red first-of-class  Being a relatively recent proposal  there aren t enough interoperable implementations for it to be usable in production sites yet  Hopefully this will change soon  In the meantime  the workaround I ve suggested should work for most cases   Keep in mind that this answer assumes that the question is looking for every first child element that has a given class  There is neither a pseudo-class nor even a generic CSS solution for the nth match of a complex selector across the entire document     whether a solution exists depends heavily on the document structure  jQuery provides  eq     first   last and more for this purpose  but note again that they function very differently from  nth-child   et al  Using the Selectors API  you can either use document querySelector   to obtain the very first match   var first   document querySelector   home  gt   red      Or use document querySelectorAll   with an indexer to pick any specific match   var redElements   document querySelectorAll   home  gt   red    var first   redElements 0   var second   redElements 1      etc     Although the  red nth-of-type 1  solution in the original accepted answer by Philip Daubmeier works  which was originally written by Martyn but deleted since   it does not behave the way you d expect it to   For example  if you only wanted to select the p in your original markup    lt p class  red  gt  lt  p gt   lt div class  red  gt  lt  div gt        then you can t use  red first-of-type  equivalent to  red nth-of-type 1    because each element is the first  and only  one of its type  p and div respectively   so both will be matched by the selector   When the first element of a certain class is also the first of its type  the pseudo-class will work  but this happens only by coincidence  This behavior is demonstrated in Philip s answer  The moment you stick in an element of the same type before this element  the selector will fail  Taking the updated markup    lt div class  home  gt     lt span gt blah lt  span gt     lt p class  red  gt first lt  p gt     lt p class  red  gt second lt  p gt     lt p class  red  gt third lt  p gt     lt p class  red  gt fourth lt  p gt   lt  div gt    Applying a rule with  red first-of-type will work  but once you add another p without the class    lt div class  home  gt     lt span gt blah lt  span gt     lt p gt dummy lt  p gt     lt p class  red  gt first lt  p gt     lt p class  red  gt second lt  p gt     lt p class  red  gt third lt  p gt     lt p class  red  gt fourth lt  p gt   lt  div gt        the selector will immediately fail  because the first  red element is now the second p element

User · Answer

According to your updated problem   lt div class  home  gt     lt span gt blah lt  span gt     lt p class  red  gt first lt  p gt     lt p class  red  gt second lt  p gt     lt p class  red  gt third lt  p gt     lt p class  red  gt fourth lt  p gt   lt  div gt    how about     home span    red        border 1px solid red          This will select class home  then the element span and finally all  red elements that are placed immediately after span elements     Reference  http   www w3schools com cssref css selectors asp

User · Answer

The  first-child selector is intended  like the name says  to select the first child of a parent tag  The children have to be embedded in the same parent tag  Your exact example will work  Just tried it here       lt body gt       lt p class  red  gt first lt  p gt       lt div class  red  gt second lt  div gt   lt  body gt    Maybe you have nested your tags in different parent tags  Are your tags of class red really the first tags under the parent   Notice also that this doesnt only apply to the first such tag in the whole document  but everytime a new parent is wrapped around it  like    lt div gt       lt p class  red  gt first lt  p gt       lt div class  red  gt second lt  div gt   lt  div gt   lt div gt       lt p class  red  gt third lt  p gt       lt div class  red  gt fourth lt  div gt   lt  div gt    first and third will be red then   Update   I dont know why martyn deleted his answer  but he had the solution  the  nth-of-type selector    x000D   x000D   red nth-of-type 1  x000D    x000D      border 5px solid red  x000D     x000D   lt div class  home  gt  x000D       lt span gt blah lt  span gt  x000D       lt p class  red  gt first lt  p gt  x000D       lt p class  red  gt second lt  p gt  x000D       lt p class  red  gt third lt  p gt  x000D       lt p class  red  gt fourth lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Credits to Martyn  More infos for example here  Be aware that this is a CSS 3 selector  therefore not all browsers will recognize it  e g  IE8 or older

User · Answer

Could you try something like this   red first-of-type       border  5px solid red     you also can use this for last element  if you need it    red last-of-type       border  5px solid red

User · Answer

For some reason none of the above answers seemed to be addressing the case of the real first and only first child of the parent    element id  gt   class name first-child   All the above answers will fail if you want to apply the style to only the first class child within this code    lt aside id  element id  gt    Content    lt div class  class name  gt First content that need to be styled lt  div gt     lt div class  class name  gt      Second content that don t need to be styled      lt div gt         lt div gt           lt div class  class name  gt deep content - no style lt  div gt           lt div class  class name  gt deep content - no style lt  div gt           lt div gt             lt div class  class name  gt deep content - no style lt  div gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  aside gt

User · Answer

You could use nth-of-type 1  but be sure that site doesn t need to support IE7 etc  if this is the case use jQuery to add body class then find element via IE7 body class then the element name  then add in the nth-child styling to it

User · Answer

You can change your code to something like this to get it work   lt div class  home  gt     lt span gt blah lt  span gt     lt p class  red  gt first lt  p gt     lt p class  red  gt second lt  p gt     lt p class  red  gt third lt  p gt     lt p class  red  gt fourth lt  p gt   lt  div gt    This does the job for you   home span    red        border 3px solid green          Here is a CSS reference from SnoopCode about that

User · Answer

Try This Simple and Effective    home  gt  span    red        border 1px solid red

User · Answer

I think a lot of people have explained already  your code is selecting only first child of the first instance  If you want to select all the first children of red class  you need to use  home  gt   red first-child          put your styling here

User · Answer

you could use first-of-type or nth-of-type 1    x000D   x000D   red   x000D    color  green    x000D    x000D   x000D      red nth-of-type 1     x000D   red first-of-type   x000D    color  red    x000D    x000D   lt div class  home  gt  x000D     lt span gt blah lt  span gt  x000D     lt p class  red  gt first lt  p gt  x000D     lt p class  red  gt second lt  p gt  x000D     lt p class  red  gt third lt  p gt  x000D     lt p class  red  gt fourth lt  p gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I believe that using relative selector   for selecting elements placed immediately after  works here the best  as few suggested before    It is also possible for this case to use this selector   home p first-of-type   but this is element selector not the class one    Here you have nice list of CSS selectors  https   kolosek com css-selectors

User · Answer

Try this solution    x000D   x000D    home p first-of-type   x000D    border 5px solid red  x000D    width 100   x000D    display block  x000D    x000D   lt div class  home  gt  x000D     lt span gt blah lt  span gt  x000D     lt p class  red  gt first lt  p gt  x000D     lt p class  red  gt second lt  p gt  x000D     lt p class  red  gt third lt  p gt  x000D     lt p class  red  gt fourth lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    CodePen link

User · Answer

The above answers are too complex     class first-of-type       This will select the first-type of class  MDN Source

User · Answer

The correct answer is    red first-child   not  red     red   border 5px solid red     Part I  If element is first to its parent and has class  red   it shall get border  Part II  If   red  element is not first to its parent  but is immediately following an element without class   red   it shall also deserve the honor of said border   Fiddle or it didn t happen   Philip Daubmeier s answer  while accepted  is not correct - see attached fiddle  BoltClock s answer would work  but unnecessarily defines and overwrites styles  particularly an issue where it otherwise would inherit a different border - you don t want to declare other to border none   EDIT  In the event that you have  red  following non-red several times  each  first  red will get the border  To prevent that  one would need to use BoltClock s answer  See fiddle

User · Answer

All in All  after reading this all page and other ones and a lot of documentation  Here s the summary   For first last child  Safe to use now  Supported by all modern browsers   nth-child   Also safe to use now  Supported by all modern browsers   But be careful it even counts siblings  So  the following won t work properly    x000D   x000D     This should select the first 2 element with class display class   but it will NOT WORK Because the nth-child count even siblings    including the first div skip class     display class nth-child -n 2        background-color green     x000D   lt ul gt      lt li class  skip class  gt test 1 lt  li gt      lt li class  display class  gt test 2 should be in green lt  li gt      lt li class  display class  gt test 3 should be in green lt  li gt      lt li class  display class  gt test 4 lt  li gt    lt  ul gt  x000D   x000D   x000D   Currently  there is a selector  nth-child -n 2 of  foo  that supports selection by class but not supported by modern browsers so not useful  So  that leaves us with Javascript solution  we ll fix the example above    x000D   x000D     Here we ll go through the elements with the targeted class    and add our classmodifer to only the first 2 elements        document querySelectorAll   display class    forEach  element index    gt      if  index  lt  2  element classList add  display class--green        x000D   display class--green       background-color green    x000D   lt ul gt      lt li class  skip class  gt test 1 lt  li gt      lt li class  display class  gt test 2 should be in green lt  li gt      lt li class  display class  gt test 3 should be in green lt  li gt      lt li class  display class  gt test 4 lt  li gt    lt  ul gt  x000D   x000D   x000D

User · Answer

I got this one in my project    x000D   x000D  div  gt   b    b not  first-child    x000D   background  none  x000D    x000D  div  gt   b   x000D      background  red  x000D    x000D   lt div gt  x000D         lt p class  a  gt The first paragraph  lt  p gt  x000D         lt p class  a  gt The second paragraph  lt  p gt  x000D         lt p class  b  gt The third paragraph  lt  p gt  x000D         lt p class  b  gt The fourth paragraph  lt  p gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

I just used  first as CSS selector successfully   red first

[css] CSS selector for first element with class

Examples related to css

Examples related to css-selectors