Name: CSS :not Selector
Uploaded: 2016-01-11T00:08:12-06:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/css-css-not-selector/subtitles

CSS :not Selector

[00:00] 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.

[00:19] 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.

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

CSS :not Selector

Share this video with your friends