Descendant selector in CSS

The descendant selector, represented by a space (' '), allows you to select tags nested within a given parent

Syntax

cssselector1 selector2 {
  
}

Example

Let's select all the p tags inside the div tags and color them red:

html<div>
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

Example

Let's select all p tags inside the element with #elem and color them red:

html<div id="elem">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

Example

Let's select all p tags inside elements with the class .block and color them red:

html<div class="block">
  <p>
    text
  </p>
  <p>
    text
  </p>
</div>

css.block p {
  color: red;
}

Результат:

Example

Let's select the b tags inside the p tags inside the div tags and color them red:

html<div>
  <p>
    text <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

See also