CSS 3 - New pseudo-classes

Blog

The arrival of CSS3 brings us a bunch of new pseudo-classes, including structural ones, that target elements based on their position in the document and relation to different other elements.

:only-child – in case you have an element in the document tree that is the only child of its parent, it can be targeted by this pseudo-class.

:empty – targets elements that don’t have any children or any text, for example an empty element such as <p></p>.

:nth-child(n) – it takes advantage of numeric (n) values and targets child elements in relation to their position within the parent. To give you a precise example, a list of blog comments would probably look more appealing with alternating background colors – this can be done using this pseudo-class.

:first-of-type – this targets the first of a specific type of element within a parent, and is the opposite of :last-of-type.

:first-child – targets the first child element in a parent, regardless of its type. It is the opposite of :last-child.

:not(s) – this one targets elements that are not matched by the specified selector (s).

:root – this one targets the root element of a document.

There are more pseudo-classes added to the new CSS3, but as this is basically an article for beginners, it is not really worth mentioning them.

 

Comments (0)

Add comment

Get Call Us

Human Test : 7+6=?