Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    CSS :not Selector

    Merrick ChristensenMerrick Christensen

    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.

    cssCSS
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss