Not selector in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to select all paragraphs except those with the class "highlight".

CSS

p[1](.highlight) { color: gray; }

Drag options to blanks, or click blank then click option'

A:not

B.not

C#not

D*not

Attempts:

3 left

💡 Hint

Common Mistakes

Using .not instead of :not

Forgetting the parentheses after :not

Using #not which is an ID selector

The :not() selector in CSS selects every element that does not match the selector inside the parentheses.

2fill in blank

medium

Complete the code to select all list items except those with the class "active".

CSS

li[1](.active) { background-color: lightgray; }

Drag options to blanks, or click blank then click option'

A:is

B:has

C:not

D:where

Attempts:

3 left

💡 Hint

Common Mistakes

Using :has which selects elements containing certain children

Using :is which selects elements matching any selector inside

Using :where which is similar to :is but with zero specificity

The :not() selector excludes elements matching the selector inside the parentheses.

3fill in blank

hard

Fix the error in the code to select all divs except those with the class "container".

CSS

div[1].container { border: 1px solid black; }

Drag options to blanks, or click blank then click option'

Anot

B:not(

C:not

D:not)

Attempts:

3 left

💡 Hint

Common Mistakes

Writing :not without parentheses

Using not without colon

Closing parenthesis before opening

The :not selector requires parentheses around the selector to exclude, so use :not( before the selector.

4fill in blank

hard

Fill both blanks to select all input elements except those of type "checkbox".

CSS

input[1][type=[2]checkbox]) { outline: none; }

Drag options to blanks, or click blank then click option'

A:not(

B"

C'

D:is(

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes instead of double quotes

Forgetting the opening parenthesis after :not

Using :is instead of :not

Use :not([type="checkbox"]) to exclude inputs of type checkbox. The attribute value must be in quotes.

5fill in blank

hard

Fill both blanks to select all buttons except those with class "primary" or type "submit".

CSS

button[1](.primary,[type=[2]submit]) { opacity: 0.5; }

Drag options to blanks, or click blank then click option'

A:not(

B"

C)

D:is(

Attempts:

3 left

💡 Hint

Common Mistakes

Missing closing parenthesis

Using :is instead of :not

Using single quotes instead of double quotes

Forgetting the brackets around attribute selector

Use :not(.primary, [type="submit"]) to exclude buttons matching either the .primary class or type submit. Note the comma-separated list inside :not() and proper quotes/parentheses.

Practice

1. What does the CSS :not() selector do?

easy

A. It selects only the elements matching the selector inside :not().

B. It selects all elements except those matching the selector inside :not().

C. It selects elements that have no children.

D. It selects elements that are hidden.

Solution

1. Step 1: Understand the purpose of :not()

   The :not() selector excludes elements that match the selector inside it.

2. Step 2: Identify what it selects

   It selects all elements except those that match the selector inside :not().

3. Final Answer:

   It selects all elements except those matching the selector inside :not(). -> Option B

4. Quick Check:

   :not() excludes matching elements [OK]

Hint: Think 'everything but' the selector inside :not() [OK]

Common Mistakes:

• Thinking it selects only matching elements
• Confusing it with :only-child or :empty
• Assuming it selects hidden elements

2. Which of the following is the correct syntax to select all p elements except those with class intro?

easy

A. p:not(.intro) { color: blue; }

B. p:not#intro { color: blue; }

C. p:not[.intro] { color: blue; }

D. p:not(intro) { color: red; }

Solution

1. Step 1: Check the syntax for :not() with class selector

   The correct syntax uses parentheses with a class selector inside: :not(.intro).

2. Step 2: Verify the selector targets p elements except those with class intro

   p:not(.intro) means all p elements except those with class intro.

3. Final Answer:

   p:not(.intro) { color: blue; } -> Option A

4. Quick Check:

   Correct :not() syntax uses parentheses and proper selector [OK]

Hint: Use parentheses and proper selector inside :not() [OK]

Common Mistakes:

• Using square brackets instead of parentheses
• Missing dot for class selector
• Using # instead of . for class

3. Given this HTML:

<div>
  <p class="intro">Hello</p>
  <p>World</p>
  <p class="note">Note</p>
</div>

And CSS:

p:not(.intro) { color: red; }

What color will the text inside each <p> be?

medium

A. Hello: black (default), World: red, Note: red

B. Hello: red, World: red, Note: red

C. Hello: red, World: black, Note: black

D. Hello: black, World: black, Note: black

Solution

1. Step 1: Identify which p elements match :not(.intro)

   The p with class intro is excluded. The other two p elements match.

2. Step 2: Determine the color applied

   Only p elements without class intro get color: red;. So "World" and "Note" are red, "Hello" stays default black.

3. Final Answer:

   Hello: black (default), World: red, Note: red -> Option A

4. Quick Check:

   :not(.intro) excludes "Hello" [OK]

Hint: Only elements NOT matching inside :not() get styles [OK]

Common Mistakes:

• Assuming all p get red color
• Confusing which elements are excluded
• Ignoring default browser styles

4. What is wrong with this CSS selector?

div:not .highlight { background: yellow; }

medium

A. Background color cannot be applied to div.

B. Using div instead of .highlight.

C. Missing parentheses around the selector inside :not().

D. The selector is correct and will work as expected.

Solution

1. Step 1: Check syntax of :not() usage

   The :not() selector requires parentheses around the selector inside it.

2. Step 2: Identify the error in the given selector

   The selector uses :not .highlight without parentheses, which is invalid syntax.

3. Final Answer:

   Missing parentheses around the selector inside :not(). -> Option C

4. Quick Check:

   :not() always needs parentheses [OK]

Hint: Always use parentheses immediately after :not [OK]

Common Mistakes:

• Omitting parentheses in :not()
• Adding space between :not and parentheses
• Assuming :not works like a combinator

5. You want to style all button elements except those that are disabled or have the class cancel. Which CSS selector achieves this?

hard

A. button:not(:disabled .cancel) { background: green; }

B. button:not(:disabled, .cancel) { background: green; }

C. button:not(:disabled) .cancel { background: green; }

D. button:not(:disabled):not(.cancel) { background: green; }

Solution

1. Step 1: Understand multiple exclusions with :not()

   To exclude multiple selectors, chain multiple :not() selectors.

2. Step 2: Analyze each option

   button:not(:disabled):not(.cancel) { background: green; } correctly chains :not(:disabled) and :not(.cancel). button:not(:disabled, .cancel) { background: green; } tries to combine selectors inside one :not(), which is invalid. button:not(:disabled .cancel) { background: green; } uses invalid syntax. button:not(:disabled) .cancel { background: green; } selects .cancel inside button:not(:disabled), which is incorrect.

3. Final Answer:

   button:not(:disabled):not(.cancel) { background: green; } -> Option D

4. Quick Check:

   Chain multiple :not() for multiple exclusions [OK]

Hint: Chain multiple :not() for multiple exclusions [OK]

Common Mistakes:

• Trying to combine selectors inside one :not()
• Using spaces inside :not() incorrectly
• Misunderstanding descendant selectors