CSS3 Selectors: Only-child

This entry is part 31 of 40 in the series CSS3 Selectors

:only-child works as you would have expected.

It targets the only child of its parent.

This could be helpful when you are retrieving a list from the database and there is only one item in the list.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
        ul li:only-child {
            color: blue;

<h4>British Pop</h4>
    <li>Cold Play</li>
    <li>Depeche Mode</li>

<h4>American Rock</h4>



Series Navigation<< CSS3 Selectors: nth-last-child
CSS3 Selectors: first-of-type >>