This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

CSS :not Selector

0:53 CSS lesson by

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

The CSS :not() selector allows us to exclude a subset of elements matched by our selector. In this example we refactor two selectors down to one using the CSS :not() selector.

A common pattern in CSS is when styling a group of elements, and you don't want one of those elements to have the styles, you make a more specific selector, and you undo the styles. In this case, we have a list of elements, apples, oranges, coconuts, and we don't want the border on the last element, so we override it with :last-child.

Using the CSS :not selector, we can accomplish this same thing with one selector. The :not selector lets you exclude a subset of the elements matched by your parent selector. In our case, we can drop this class here. We can add :not(:last-child), and we have the same effect.

Within the :not, we can provide any selector we want, so we can, for example, drop the [inaudible 00:45] on the :first-child. Or we can use :nth-child and drop the second.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?