CSS selectors

Just a short and helpful refresher about the css selectors

What can be selected

There are a lot of events (e.g. checked, hover, enabled, ...) on html element which can be selected, but there are also some more to browse the children (first child, even children, ...)

Simple example

The simple line will change the behaviour on the whole page

Example

Code

        ul li:first-child {
            color: #0fbcf3;
        }

        ul li:last-child {
            background-color: #0fbcf3;
        }

        ul li:nth-child(odd){
            border: blue 1px solid;
        }

        ul li:first-letter{
            font-size: 2rem;
        }

More information

Pseudo-classes in the Mozilla docs

Tricks