curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672b8e9892eafe238d6513a5.md
Class selectors are a key part of CSS, allowing developers to target multiple elements with the same class attribute and apply consistent styling.
This makes them highly versatile and efficient for applying styles across a website.
Class selectors are defined by a period (.) followed by the class name. They can be applied to any element in the HTML document.
Here is an example using a class selector:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p class="highlight">Example paragraph</p>
.highlight {
color: green;
}
:::
In this example, any element with the class highlight will have its text color set to green.
Class selectors have a higher specificity than type selectors but lower than ID selectors and inline styles.
The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.
Class selectors can be combined with other selectors to create more specific rules.
Here is an example combining a paragraph type selector with a class selector:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<p class="bold-text">Example paragraph</p>
<p class="bold-text">Example paragraph</p>
<p>Another paragraph</p>
<p>Yet another paragraph</p>
p.bold-text {
font-weight: bold;
}
:::
This rule applies only to p elements that also have the bold-text class, making their text bold.
What is the specificity value of a class selector (e.g., .example)?
(1, 0, 0, 0)
This selector targets elements with a specific class name.
(0, 1, 0, 0)
This selector targets elements with a specific class name.
(0, 0, 1, 0)
(0, 0, 0, 1)
This selector targets elements with a specific class name.
3
Which of the following selectors has a higher specificity than a class selector?
A type selector.
This selector targets elements with a unique identifier.
An ID selector.
A universal selector.
This selector targets elements with a unique identifier.
A pseudo-element.
This selector targets elements with a unique identifier.
2
Given the following CSS, what will be the color of the text?
<head>
<style>
.highlight {
color: green;
}
p {
color: blue;
}
p.highlight {
color: red;
}
</style>
</head>
<body>
<p class="highlight">This text</p>
</body>
green
Consider the specificity of the combined selectors.
blue
Consider the specificity of the combined selectors.
red
purple
Consider the specificity of the combined selectors.
3