This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

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.

    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