first-child not working as expected

Question

I m trying to select the first h1 inside a div with a class called detail container  It works if h1 is the first element within this div  but if it comes after this ul it won t work    lt style type  text css  gt   detail container h1 first-child   color blue      lt  style gt   lt  head gt   lt body gt   lt div class  detail container  gt       lt ul gt       lt li gt  lt  li gt       lt li gt  lt  li gt       lt  ul gt       lt h1 gt First H1 lt  h1 gt       lt h1 gt Second H1 lt  h1 gt   lt  div gt   lt  body gt   lt  html gt    I was under the impression that the CSS I have will select the first h1 no matter where it is in this div  How can I make it work

User · Answer

The element cannot directly inherit from  lt body gt  tag  You can try to put it in a  lt dir style  padding-left 0px   gt  lt  dir gt  tag

User · Answer

you can also use   detail container h1 nth-of-type 1    By changing the number 1 by any other number you can select any other h1 item

User · Answer

You could wrap your h1 tags in another div and then the first one would be the first-child  That div doesn t even need styles  It s just a way to segregate those children    lt div class  h1-holder  gt       lt h1 gt Title 1 lt  h1 gt       lt h1 gt Title 2 lt  h1 gt   lt  div gt

User · Answer

first-child selects the first h1 if and only if it is the first child of its parent element   In your example  the ul is the first child of the div   The name of the pseudo-class is somewhat misleading  but it s explained pretty clearly here in the spec   jQuery s  first selector gives you what you re looking for   You can do this       detail container h1 first   css  color    blue

User · Answer

The h1 first-child selector means     Select the first child of its parent   if and only if it s an h1 element    The  first-child of the container here is the ul  and as such cannot satisfy h1 first-child   There is CSS3 s  first-of-type for your case    detail container h1 first-of-type       color  blue       But with browser compatibility woes and whatnot  you re better off giving the first h1 a class  then targeting that class    detail container h1 first       color  blue

User · Answer

For that particular case you can use    detail container  gt  ul   h1       color  blue       But if you need that same selector on many cases  you should have a class for those  like BoltClock said

[css] :first-child not working as expected

Examples related to css

Examples related to css-selectors