We all know about the class, id ,type and universal selector. In this article we learn about the more advanced css selector.
Compound Class selector
let’s create one html and one css file and link the the html file to the css. Write this code for understanding the compound class selector.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="selector.css" rel="stylesheet" />
</head>
<body>
<!--Compound class selector-->
<div class="box red">Box-1</div>
<div class="box yellow">Box-2</div>
<div class="circle yellow">Box-3</div>
</body>
.box {
height: 100px;
color: red;
}
.circle {
height: 200px;
color: green;
Now if you want to select the second div for styling. There is problem.If apply our style using class selector box then first and second both get selected.If you apply style using yellow last two div gets selected. To only select the middle div element we need to use the compound class selector.
There is no space between each of .class portions of the compound selectors.
Now style our second div using compound class selector.
.box.yellow {
color:purple;
height : 200px;
}
Let’s see the output of our code.
second div content became purple.
Top comments (0)