सीएसएस में डिसेंडेंट सेलेक्टर और क्लासेस के जटिल संयोजन

मान लीजिए अब हमारे पास निम्नलिखित कोड है:

html<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>

आइए header क्लास वाले सभी एलिमेंट्स को ढूंढें, जो block क्लास वाले एलिमेंट के अंदर स्थित हैं, और उन्हें Arial फॉन्ट निर्धारित करें:

css.block .header {
  font-family: Arial;
}

जैसा कि HTML कोड में दिखाई देता है, block क्लास वाले एलिमेंट के अंदर header क्लास वाले एलिमेंट h2 हेडिंग के साथ-साथ h3 हेडिंग भी हो सकते हैं। आइए ऐसे सेलेक्टर लिखें जो इन हेडिंग्स को अलग करते हैं, और इन हेडिंग्स के साथ कुछ करते हैं।

आइए block क्लास वाले एलिमेंट के अंदर स्थित सभी h2 जिनमें header क्लास है, को चुनें:

css.block h2.header {
  font-size: 30px;
  color: red;
}

और अब block क्लास वाले एलिमेंट के अंदर स्थित सभी h3 जिनमें header क्लास है, को चुनें:

css.block h3.header {
  font-size: 20px;
  color: green;
}

आइए हमारा सारा CSS एक साथ इकट्ठा करें:

css.block .header {
  font-family: Arial;
}
.block h2.header {
  font-size: 30px;
  color: red;
}
.block h3.header {
  font-size: 20px;
  color: green;
}

इसे हमारे HTML कोड पर लागू करें:

css.eee .bbb {
  color: red;
}

css.eee h2 {
  color: red;
}

css.eee h2.bbb {
  color: red;
}

css.eee h3.bbb {
  color: red;
}

css.eee p.bbb {
  color: red;
}

css.eee .bbb .kkk {
  color: red;
}