Not selector in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Using :not() to exclude elements

Given the HTML below, which CSS selector will color all

elements except those with class exclude in red?

CSS

<section>
  <p>Paragraph 1</p>
  <p class="exclude">Paragraph 2</p>
  <p>Paragraph 3</p>
  <p class="exclude">Paragraph 4</p>
</section>

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

B p:not(#exclude) { color: red; }

C p:not(.exclude) { color: red; }

D p:not(.exclude) { background-color: red; }

💡 Hint

Use :not() with the class selector inside parentheses to exclude elements with that class.

The :not() selector excludes elements matching the selector inside it. Here, p:not(.exclude) selects all

elements that do NOT have the class 'exclude'. Option C colors those paragraphs red as required. Option C is invalid syntax because #exclude is an ID selector and missing parentheses. Option C colors the correct elements but uses blue instead of red. Option C changes background color, not text color.

❓ selector

intermediate

Selecting inputs except checkboxes

Which CSS selector will select all elements except those of type checkbox?

CSS

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="password" />
</form>

A input:not(type="checkbox") { border: 2px solid green; }

B input:not([type="checkbox"]) { border: 2px solid green; }

C input:not(#checkbox) { border: 2px solid green; }

D input:not(.checkbox) { border: 2px solid green; }

💡 Hint

Use attribute selectors inside :not() to exclude inputs with type checkbox.

Option B correctly uses the attribute selector [type="checkbox"] inside :not() to exclude checkbox inputs. Option B is invalid syntax because it misses brackets around the attribute selector. Options A and D try to exclude by ID or class which do not apply here.

❓ rendering

advanced

Visual effect of :not() with multiple classes

Consider the CSS below. What color will the

with classes box and highlight have?

CSS

<style>
  .box:not(.highlight) { background-color: yellow; }
  .box.highlight { background-color: blue; }
</style>
<div class="box highlight">Test Box</div>

A Blue background

B Yellow background

C No background color

D Both yellow and blue backgrounds layered

💡 Hint

Check which selectors apply and which have higher specificity.

The div has both classes 'box' and 'highlight'. The selector .box:not(.highlight) excludes elements with class 'highlight', so it does not apply here. The selector .box.highlight applies and sets background to blue. Therefore, the background color is blue.

🧠 Conceptual

advanced

Understanding :not() with complex selectors

Which statement about the CSS selector div:not(.active) > p is true?

A Selects all <p> elements that are direct children of <div> elements without class 'active'.

B Selects all <p> elements inside any <div> that does not have class 'active', including nested descendants.

C Selects all <p> elements that do not have class 'active' and are inside any <div>.

D Selects all <div> elements that do not have class 'active' and contain <p> children.

💡 Hint

Look carefully at the combinator and :not() placement.

The selector div:not(.active) > p means: select

elements that are direct children (>) of

elements that do NOT have the class 'active'. Option A states this correctly. Option A is incorrect because it says nested descendants, but > means direct children only. Option A incorrectly applies :not() to

elements. Option A selects

elements, but the selector targets

elements.

❓ accessibility

expert

Using :not() for accessible focus styling

You want to style all interactive elements except disabled buttons when they receive keyboard focus. Which CSS selector correctly applies a visible outline only to those elements?

A :is(button, a, input):not(:disabled:focus-visible) { outline: 3px solid orange; }

B :is(button, a, input):focus-visible:not(:disabled) { outline: 3px solid orange; }

C :is(button, a, input):focus:not(:disabled) { outline: 3px solid orange; }

D :is(button, a, input):not(:disabled):focus-visible { outline: 3px solid orange; }

💡 Hint

Use :not() to exclude disabled elements before applying :focus-visible.

Option D correctly selects buttons, links, and inputs that are not disabled and are focused via keyboard (:focus-visible). Option D places :focus-visible before :not(:disabled), but best practice is to exclude first. Option D uses :not(:disabled:focus-visible) which doesn't properly target the focus state. Option D uses :focus instead of :focus-visible, which is less accessible because it applies on mouse focus too.