Learn CSS selectors using picture(Direct child selector)

Shahid khan — Sun, 28 Aug 2022 11:51:36 +0000

CSS selector explained using a picture(Descendant selectors)

Shahid khan — Sun, 28 Aug 2022 11:02:58 +0000

CSS selector in depth(compound class selector)

Shahid khan — Sat, 27 Aug 2022 06:04:48 +0000

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.

DEV Community: Shahid khan

Learn CSS selectors using picture(Direct child selector)

CSS selector explained using a picture(Descendant selectors)

CSS selector in depth(compound class selector)

Compound Class selector