Not selector in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the :not() selector do in CSS?

The :not() selector selects all elements that do NOT match the selector inside the parentheses. It helps exclude specific elements from styling.

beginner

How would you select all <p> elements except those with class highlight?

Use p:not(.highlight). This selects all paragraphs that do not have the class highlight.

intermediate

Can :not() accept multiple selectors separated by commas?

No. The :not() selector accepts only a single simple selector. To exclude multiple selectors, chain multiple :not() selectors.

beginner

Example: div:not(.active) - What does this select?

It selects all <code>div</code> elements that do NOT have the class <code>active</code>. So any <code>div</code> without that class will be styled.

intermediate

Why use :not() instead of just selecting what you want directly?

Sometimes it’s easier to say "select everything except this" rather than listing all the things you want. It keeps CSS simpler and easier to maintain.

What does button:not(.disabled) select?

A All buttons with class disabled

B All buttons without class disabled

C All elements except buttons with class disabled

D Only buttons with class disabled

The :not(.disabled) selects buttons that do NOT have the class disabled.

Can :not() contain multiple selectors separated by commas?

A No, only one simple selector is allowed

B Yes, it accepts multiple selectors

C Yes, but only if selectors are classes

D No, it only works with IDs

:not() accepts only one simple selector inside the parentheses.

Which CSS rule excludes all li elements with class special?

A li:not(.special)

B li:not#special

C :not(li.special)

D li.special

li:not(.special) selects all li elements except those with class special.

What is the main benefit of using :not()?

A To style all elements

B To select elements with a specific class

C To select only IDs

D To exclude certain elements from selection

:not() helps exclude elements from being selected.

Which selector selects all input elements except those of type checkbox?

A input[type=checkbox]

B input:checkbox

C input:not([type=checkbox])

D input:not(.checkbox)

input:not([type=checkbox]) selects all inputs except checkboxes.

Explain how the :not() selector works and give a simple example.

Think about selecting everything except something specific.

Describe a situation where using :not() makes CSS easier to write.

Imagine you want to style many items but skip a few.