:only-child

Selects an element that is the only child of its parent. Text nodes don't count; the parent element is allowed to have text node children.

Testsheet:

li:only-child {color: #CB000F;}

• This <ul> has two child <li>s.
• Neither should be red, since neither is an only child.

• This <ul> has one child <li> that should be red.

Dynamic

What happens when we add an element to the last <ul>? The red should be removed, since the <li> is not the only child of its parent any more.

Add an extra <li> to the test UL.