Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    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.



    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




    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 on the :first-child. Or we can use :nth-child and drop the second.