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.