Chapter 10 Beginner 58 Questions

Practice Questions — CSS Selectors and Specificity

← Back to Notes

19 Easy

16 Medium

8 Hard

Topic-Specific Questions

Question 1

Easy

Which selector targets all paragraphs?

Use the tag name.

p

Question 2

Easy

Which symbol starts a class selector?

Dot.

. (period)

Question 3

Easy

Which symbol starts an ID selector?

Hash.

# (hash)

Question 4

Easy

Write CSS to make all elements with class 'danger' red.

Use .danger.

.danger {
  color: red;
}

Question 5

Easy

Write CSS to style the element with id 'header' with a blue background.

Use #header.

#header {
  background-color: blue;
}

Question 6

Easy

Which has higher specificity: p or .note?

Classes beat elements.

.note (class specificity 10 > element specificity 1).

Question 7

Easy

Which selector matches every element on the page?

An asterisk.

* (universal selector)

Question 8

Easy

Write CSS to remove the margin and padding from every element on the page.

Use the universal selector.

* {
  margin: 0;
  padding: 0;
}

Question 9

Easy

What does ul li mean?

Space is the descendant selector.

Every <li> that is inside a <ul>, at any depth.

Question 10

Easy

What is the difference between ul li and ul > li?

Child vs descendant.

ul li matches all li inside ul at any depth. ul > li matches only DIRECT li children of ul.

Question 11

Easy

Write CSS to style all paragraphs inside articles with a grey color.

Use descendant selector.

article p {
  color: grey;
}

Question 12

Easy

What is the specificity of #main?

IDs are 100.

100

Question 13

Easy

Why does this CSS not style the element?

highlight {
  color: yellow;
}

Missing symbol.

Missing dot. Should be .highlight { color: yellow; }

Question 14

Easy

Write CSS to group h1, h2, and h3 and give them all a red color.

Use commas.

h1, h2, h3 {
  color: red;
}

Question 15

Medium

What does h1 + p match?

Adjacent sibling.

The first <p> element that comes immediately after an <h1>, sharing the same parent.

Question 16

Medium

What does h1 ~ p match?

General sibling.

Every <p> that comes after an <h1>, sharing the same parent (not just the first one).

Question 17

Medium

Write CSS to target only the li elements that are direct children of nav (not nested ones).

Use the child combinator.

nav > li {
  color: blue;
}

Question 18

Medium

Which of these has higher specificity: #main or .btn.large?

ID is 100; two classes are 20.

#main (100 > 20).

Question 19

Medium

Write a complete HTML page where every other list item has a grey background using nth-child.

Use li:nth-child(even).

<!DOCTYPE html>
<html>
<head>
<style>
  li:nth-child(even) {
    background-color: lightgrey;
  }
</style>
</head>
<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
  </ul>
</body>
</html>

Question 20

Medium

Given .red { color: red; } and p { color: blue; }, what color is <p class="red">Text</p>?

Class wins over element.

Red. The class (10) beats the element (1).

Question 21

Medium

Write CSS using attribute selector to make all email inputs have a green border.

Use [type="email"].

input[type="email"] {
  border: 2px solid green;
}

Question 22

Medium

Priya's CSS does not work. Why?

ul > li li {
  color: red;
}

Actually, it might work — analyse it.

The CSS is valid. It targets every li that is a descendant of a direct li child of ul. So it styles nested li elements.

Question 23

Medium

Write CSS targeting the first li in a list using the :first-child pseudo-class.

Use li:first-child.

li:first-child {
  font-weight: bold;
}

Question 24

Medium

What is the specificity of #main .card p?

Add up: 100 + 10 + 1.

111

Question 25

Hard

Build a complete HTML page where links to PDFs show in bold red with a 'PDF' label automatically. Use an attribute selector.

Use a[href$=".pdf"].

<!DOCTYPE html>
<html>
<head>
<style>
  a[href$=".pdf"] {
    color: red;
    font-weight: bold;
  }
</style>
</head>
<body>
  <p><a href="https://example.com">Regular link</a></p>
  <p><a href="document.pdf">Download PDF</a></p>
</body>
</html>

Question 26

Hard

Given: p { color: red; } p.note { color: blue; } #special { color: green; }. What color is <p id="special" class="note">Text</p>?

Compute specificity for each.

Green. #special has specificity 100, p.note has 11, p has 1. #special wins.

Question 27

Hard

Write CSS to target every third item in a list using nth-child.

Use 3n.

li:nth-child(3n) {
  color: purple;
}

Question 28

Hard

The text should be green, but it shows red. Why?

<style>
  .note { color: green; }
</style>
<p class="note" style="color: red;">Text</p>

Inline CSS.

Inline styles have specificity 1000, which beats the class's 10. Inline CSS wins.

Mixed & Application Questions

Question 1

Easy

What does the universal selector * target?

Everything.

Every element on the page.

Question 2

Easy

Write a class selector to make all elements with class 'big' have a 24px font size.

Start with a dot.

.big {
  font-size: 24px;
}

Question 3

Easy

Can multiple elements share the same class?

Yes.

Yes, classes are designed to be reused on many elements.

Question 4

Easy

Can multiple elements share the same ID?

No.

No, IDs must be unique on a page.

Question 5

Easy

Why is this class selector wrong?

#highlight { color: yellow; }

Wrong symbol.

If highlight is a class, use .highlight with a dot, not #.

Question 6

Medium

Write CSS to style all elements with class 'card' AND also have the class 'featured'.

Chain the class selectors without a space.

.card.featured {
  border: 3px solid gold;
}

Question 7

Medium

What is the specificity of .btn.large?

Two classes.

Question 8

Medium

Write a CSS rule to target all buttons that have the 'disabled' attribute.

Use [disabled].

button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

Question 9

Medium

What does a[href^="https"] match?

^ means starts with.

All <a> tags whose href attribute starts with 'https'.

Question 10

Medium

The second-level list items are also being styled, but Aarav only wants the top-level ones. Fix:

.menu li { color: red; }

Change descendant to child.

Use .menu > li to target only direct children.

Question 11

Medium

Write a complete HTML page styling the first letter of a paragraph in red with a bigger font. Use ::first-letter pseudo-element.

Use p::first-letter.

<!DOCTYPE html>
<html>
<head>
<style>
  p::first-letter {
    color: red;
    font-size: 32px;
    font-weight: bold;
  }
</style>
</head>
<body>
  <p>This paragraph has a fancy first letter.</p>
</body>
</html>

Question 12

Hard

Given: p { color: red !important; } #id p { color: blue; }. What wins?

!important trumps specificity.

Red wins because !important overrides specificity.

Question 13

Hard

Build a complete HTML page with a styled nav menu where only the FIRST link is blue (use :first-child).

Use li:first-child a.

<!DOCTYPE html>
<html>
<head>
<style>
  nav ul { list-style: none; display: flex; gap: 20px; }
  nav li:first-child a { color: blue; font-weight: bold; }
</style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

Question 14

Hard

What is the specificity of body #main .card p.bold?

Count each type: 1 element + 1 ID + 2 classes + 1 element.

112 (1 element + 100 ID + 10 class + 10 class + 1 element).

Question 15

Hard

Aarav adds a class to override a style but it does not work. Fix:

<style>
  #main p { color: red; }
  .override { color: blue; }
</style>
<div id="main">
  <p class="override">Text</p>
</div>

ID has higher specificity.

#main p has specificity 101, .override has 10. The ID wins. To fix, use #main p.override or add more specificity.

Multiple Choice Questions

MCQ 1

Which symbol starts a class selector?

A. #
B. .
C. @
D. $

Answer: B
B is correct. Class selectors start with a dot: .classname. The # is for IDs.

MCQ 2

Which symbol starts an ID selector?

A. .
B. #
C. *
D. @

Answer: B
B is correct. ID selectors start with a hash: #idname. The . is for classes.

MCQ 3

What does the universal selector * do?

A. Targets the first element only
B. Targets all elements on the page
C. Targets all classes
D. Targets all IDs

Answer: B
B is correct. The asterisk matches every element. Used in CSS resets to clear default margins and padding.

MCQ 4

Which has higher specificity: a class or an element selector?

A. Element
B. Class
C. They are the same
D. Depends on the browser

Answer: B
B is correct. Classes have specificity 10, elements have specificity 1. Classes win when both apply.

MCQ 5

What does ul li target?

A. Only the first li in ul
B. All li inside ul at any depth
C. Only direct li children of ul
D. All ul elements

Answer: B
B is correct. The space is the descendant selector, matching elements at any depth inside their ancestor.

MCQ 6

What does ul > li target?

A. All li inside ul
B. Only direct li children of ul
C. The first li
D. The last li

Answer: B
B is correct. The > combinator means 'direct child only'. Nested li elements are not matched.

MCQ 7

How do you group selectors to share the same rule?

A. With a period
B. With a semicolon
C. With a comma
D. With a plus

Answer: C
C is correct. Commas group selectors: h1, h2, h3 { color: red; }

MCQ 8

Can multiple HTML elements share the same ID?

A. Yes
B. No - IDs must be unique per page
C. Only in the head
D. Only with a special attribute

Answer: B
B is correct. IDs are meant to be unique. If you need to target multiple elements, use a class instead.

MCQ 9

What is the specificity of an element selector like p?

A. 0
B. 1
C. 10
D. 100

Answer: B
B is correct. Element selectors have specificity 1. Classes are 10, IDs are 100, inline is 1000.

MCQ 10

What is the specificity of a class selector like .btn?

A. 1
B. 10
C. 100
D. 1000

Answer: B
B is correct. Classes, attributes, and pseudo-classes all have specificity 10.

MCQ 11

What is the specificity of an ID selector like #main?

A. 1
B. 10
C. 100
D. 1000

Answer: C
C is correct. ID selectors have specificity 100. Only inline styles and !important can normally override them.

MCQ 12

Which selector targets all input elements with type='email'?

A. input.email
B. input#email
C. input[type='email']
D. input:email

Answer: C
C is correct. Attribute selectors use square brackets: input[type='email']

MCQ 13

What does h1 + p select?

A. All paragraphs
B. The first paragraph inside h1
C. The paragraph immediately after h1
D. Every paragraph after h1

Answer: C
C is correct. The + is the adjacent sibling combinator. It matches the FIRST p immediately after each h1.

MCQ 14

What does h1 ~ p select?

A. The first paragraph after h1
B. All paragraphs after h1 (sharing the same parent)
C. All paragraphs inside h1
D. Paragraphs and h1 together

Answer: B
B is correct. The ~ is the general sibling combinator. It matches every p that comes after an h1 (same parent).

MCQ 15

Which has higher specificity: .btn or button?

A. button
B. .btn
C. They are equal
D. Depends on the order

Answer: B
B is correct. Class (10) beats element (1). .btn wins.

MCQ 16

What is the specificity of #main .card p?

A. 100
B. 111
C. 101
D. 110

Answer: B
B is correct. 1 ID (100) + 1 class (10) + 1 element (1) = 111.

MCQ 17

What does li:nth-child(even) target?

A. Only the first li
B. Every li element
C. Every 2nd, 4th, 6th, etc. li
D. Only odd-numbered li elements

Answer: C
C is correct. :nth-child(even) matches even-numbered children (2nd, 4th, 6th, etc.).

MCQ 18

Which of the following rules applies to <p class="red" id="special">Hi</p>:
.red { color: red; }
#special { color: blue; }

A. The paragraph is red
B. The paragraph is blue
C. Both apply equally
D. Neither applies

Answer: B
B is correct. #special has specificity 100, .red has 10. The ID wins. Blue paragraph.

MCQ 19

What does a[href^="https"] target?

A. Any link with https
B. Links whose href STARTS with 'https'
C. Links whose href ENDS with 'https'
D. Links that contain https anywhere

Answer: B
B is correct. ^= means 'starts with'. Use $= for 'ends with' and *= for 'contains'.

MCQ 20

What is the specificity of an inline style?

A. 10
B. 100
C. 1000
D. Infinity

Answer: C
C is correct. Inline styles have specificity 1000. Only !important can override them.

MCQ 21

Which statement about !important is TRUE?

A. It has no effect on specificity
B. It overrides normal specificity and should be used often
C. It overrides normal specificity but should be avoided
D. It only works in Internet Explorer

Answer: C
C is correct. !important overrides normal specificity, but overusing it leads to unmaintainable CSS. Use proper specificity instead.

MCQ 22

When two CSS rules have the same specificity, which wins?

A. The first one declared
B. The last one declared
C. Neither — both apply
D. The browser picks randomly

Answer: B
B is correct. With equal specificity, the later rule wins. This is why order matters in CSS files.

MCQ 23

What is the specificity of .nav > li.active a?

A. 22
B. 23
C. 21
D. 30

Answer: A
A is correct. 1 class (10) + 1 element (1) + 1 class (10) + 1 element (1) = 22. Remember that > is not counted.

MCQ 24

Which property is NOT inherited by default?

A. color
B. font-family
C. margin
D. line-height

Answer: C
C is correct. Margin, padding, border, background — these are not inherited. Text-related properties (color, font, line-height) are inherited.

MCQ 25

Which of the following has the HIGHEST specificity?

A. #main .card p
B. .header .nav .item.active
C. html body #main section article p
D. Inline style

Use chained class selectors without space to apply to elements with multiple classes.

<!DOCTYPE html>
<html>
<head>
  <title>Card Grid</title>
  <style>
    body { font-family: Arial; background: #eee; padding: 20px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; max-width: 800px; margin: auto; }
    .card {
      background: white;
      padding: 20px;
      border-radius: 8px;
      border: 2px solid #ddd;
    }
    .card.featured {
      border-color: #ff4081;
      background: #fff0f5;
    }
    .card.premium {
      border-color: gold;
      background: #fffacd;
      box-shadow: 0 0 20px gold;
    }
    h3 { margin: 0 0 10px; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="card"><h3>Card 1</h3><p>Normal card</p></div>
    <div class="card featured"><h3>Card 2</h3><p>Featured card (pink)</p></div>
    <div class="card"><h3>Card 3</h3><p>Normal card</p></div>
    <div class="card premium"><h3>Card 4</h3><p>Premium card (gold glow)</p></div>
    <div class="card featured"><h3>Card 5</h3><p>Another featured</p></div>
    <div class="card"><h3>Card 6</h3><p>Normal card</p></div>
  </div>
</body>
</html>

Need to Review the Concepts?

Go back to the detailed notes for this chapter.

Read Chapter Notes

Want to learn web development with a live mentor?

Explore our Frontend Masterclass