:first-child not working as expected

by

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;
}

More Related Contents:

  1. how do I make device specific selectors in css [closed]
  2. Is there a “previous sibling” selector?
  3. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  4. CSS selector for first element with class
  5. What does the “+” (plus sign) CSS selector mean?
  6. How are the points in CSS specificity calculated
  7. Is there a CSS selector by class prefix?
  8. CSS selector for “foo that contains bar”? [duplicate]
  9. How do I select an element based on the state of another element in the page with CSS?
  10. Does the order of classes listed on an item affect the CSS?
  11. Handling a colon in an element ID in a CSS selector [duplicate]
  12. How can I select an nth child without knowing the parent element?
  13. Can I use variables for selectors?
  14. How to select label for=”XYZ” in CSS?
  15. In which direction do selector engines read, exactly?
  16. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  17. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  18. How can I apply styles to multiple classes at once?
  19. Is it possible to select the last n items with nth-child?
  20. CSS property value from class name
  21. Can I colour backgrounds of selected items in HTML select options with CSS only?
  22. LESS CSS: abusing the & Operator when nesting?
  23. CSS3 combining selectors with OR instead of AND
  24. Why doesn’t this CSS :not() declaration filter down?
  25. How do I select an element only when inside another element?
  26. How to show the first N elements of a block and hide the others in css?
  27. How do I apply a style to all children of an element
  28. What is the difference between :before and ::before?
  29. What is the difference between pseudo-classes and pseudo-elements?
  30. Shorten verbose CSS that repeats combinations of elements and pseudo-classes

Leave a Comment