Is there a CSS selector for the first direct child only?

by

What you posted literally means “Find any divs that are inside of section divs and are the first child of their parent.” The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: “Find any divs that are the direct descendents of section divs” which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it’s not worth caring about.

More Related Contents:

  1. CSS negation pseudo-class :not() for parent/ancestor elements
  2. How can I select the last element with a specific class, not last child inside of parent?
  3. How to target a specific column or row in CSS Grid Layout?
  4. CSS :selected pseudo class similar to :checked, but for elements
  5. Matching the first/nth element of a certain type in the entire document
  6. Using CSS :before and :after pseudo-elements with inline CSS?
  7. Difference in applying CSS to html, body, and the universal selector *?
  8. How can I correctly select the first or the last child with CSS?
  9. A CSS selector to get last visible div
  10. Using :before and :after CSS selector to insert HTML [duplicate]
  11. What is syntax for selector in CSS for next element?
  12. :nth-child(even/odd) selector with class [duplicate]
  13. How to CSS: select element based on inner HTML [duplicate]
  14. What are the priorities among CSS selectors
  15. Can a dynamic class be styled using CSS? [duplicate]
  16. Default :target with CSS
  17. Can a ::before selector be used with a ?
  18. Avoiding repeated constants in CSS
  19. Select second last element with css
  20. How do I give a CSS class priority over an id?
  21. How to run the CSS3 animation to the end if the selector is not matching anymore?
  22. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  23. Is there a css selector for selecting an element futherup in the html?
  24. How to get CSS to select ID that begins with a string (not in Javascript)?
  25. Selecting the last element among various nested containers
  26. Is there a reason to use a instead of a:link or a:visited in my stylesheet?
  27. Zebra striping a flexbox table with wrapping items
  28. Hide element, but show CSS generated content
  29. How can I get a specific number child using CSS?
  30. Why does .class:last-of-type not work as I expect?

Leave a Comment