first-child not working
css, css-selectors
Solution
`:first-child` only selects the first child of its parent. Nothing else.
As mentioned in a few of my other answers on the site (1 2 3 4), there is no `:first-of-class` pseudo-class. If you are looking to apply styles to the first of each class of your `div` elements, a solution is to apply the styles to all children of that class, and a general sibling selector to undo the styles from subsequent siblings.
Your CSS would then look like this:
.project.work:before {
content: 'Work';
}
.project.research:before {
content: 'Research';
}
.project.work ~ .project.work:before,
.project.research ~ .project.research:before {
content: none;
}
Problem
Should this work am I going crazy? ``` .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } ``` ``` <div class="project work"> <p>abcdef</p> </div> <div class="project work"> <p>abcdef</p> </div> <div class="project work"> <p>abcdef</p> </div> <div class="project research"> <p>abcdef</p> </div> ``` `projects:first-child` works fine, `research:first-child` doesn't stick. Any ideas? Demo It doesn't work, but whats the best way to achieve this?