Pseudo-classes and pseudo-elements

Pseudo-class

selects based on state.

like hovering or first element of it's type.

They help to reduce need to actually assign a class explicitly as often

Pseudo classes start with a colon :

Here is an example CSS:

            article p:first-child {
                font-size: 120%;
                font-weight:bold;
            }
            

This will cause the first <p> element in an <article> element to get the styling. We could always assign a class to the first paragraph, but if another paragraph gets added, we would need to move that assignment. And this way, we don't have to anyway.

Note on using the :first-child thing:

Using it as p:first-child will only select the first-child element if that element is also a <p>. If the first-child element is not a <p>, then the rule will not be applied. In order to select the first <p> element even if there are other elements before it, you should use the p:first-of-type.

User-action pseudo classes

also called dynamic pseudo classes

Examples are things like :hover and :focus