Complex combinations of descendant selectors and classes in CSS
Let's now assume we have the following code:
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
<div class="block">
<h2 class="header">Title h2</h2>
<p>
text
</p>
<h3 class="header">Title h3</h3>
<p>
text
</p>
<p>
text
</p>
</div>
Let's find all elements with class header that are inside an element with class block and set their font to Arial:
.block .header {
font-family: Arial;
}
As you can see in the HTML code, inside an element with class block, elements with class header can be either headings h2 or headings h3. Let's write selectors that distinguish these headings and do something with these headings.
Let's select all h2 with class header that are inside an element with class block:
.block h2.header {
font-size: 30px;
color: red;
}
Now let's select all h3 with class header that are inside an element with class block:
.block h3.header {
font-size: 20px;
color: green;
}
Let's put all our CSS together:
.block .header {
font-family: Arial;
}
.block h2.header {
font-size: 30px;
color: red;
}
.block h3.header {
font-size: 20px;
color: green;
}
Let's apply it to our HTML code:
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee .bbb {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee h2 {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee h2.bbb {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee h3.bbb {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee p.bbb {
color: red;
}
Explain what the selector in the code below selects. Then write the HTML code that matches that selector. Here's the code with the selector:
.eee .bbb .kkk {
color: red;
}
