css descendant selectors w3 w3schools code example

Example 1: css select descendant with class

Select an element with the ID "id" and the class "class":
#id.class {
}
example:
<div>
  <strong id="id" class="class">
      Foobar
  </strong>
  <strong class="class">
      Foobar
  </strong>
</div>
=> Will select the first <strong> element

Select all elements with the class "class",
which are decendents of a element with an ID of "id":
#id .class {
}
example:
<div id="id">
	<strong class="class">Foobar</strong>
</div>
=> Will select the <strong> element

Example 2: CSS descendant selectors

/*Descendant Selectors*/
/*Creates matching patterns based on the relationship between nested elements*/

<section>
	<a href="#"></a> -->/*to select "a" tag in CSS use */--> section a{...}   
</section>

/*Examples:*/
.class-selector-name 
.nested-class-name {...}

---tag with class="class-selector-name"
	|
	|--tag with class="nested-class-name"  <-- Selected

main h1 {...}

---main
	|--h1  <-- Selected
---h1 <-- Not selected!!!