Sunday, 8 October 2017

css - first-child not working

itemprop="text">

Should this work am I going
crazy?




data-hide="false" data-console="false" data-babel="false">
class="snippet-code">
.project.work:first-child:before {

            content: 'Projects';
}
.project.research:first-child:before
            {
 content: 'Research';
}

class="snippet-code-html lang-html prettyprint-override"> class="project work">

abcdef




class="project work">

abcdef




abcdef



class="project research">

abcdef








projects:first-child
works fine, research:first-child doesn't stick. Any
ideas?



rel="noreferrer">Demo It doesn't work, but whats the best way to achieve
this?



Answer




:first-child only
selects the first child of its parent. Nothing
else.




As mentioned in a few of my
other answers on the site ( href="https://stackoverflow.com/a/3615559/106224">1 href="https://stackoverflow.com/a/6447072/106224">2 href="https://stackoverflow.com/a/6649908/106224">3 href="https://stackoverflow.com/a/8539107/106224">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;
}


-

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

php - file_get_contents shows unexpected output while reading a file

I want to output an inline jpg image as a base64 encoded string, however when I do this : $contents = file_get_contents($filename); print ...