select adjacent div css code example

Example 1: adjacent sibling selector

/*The adjacent sibling combinator (+) separates two 
selectors and matches the second element only if 
it immediately follows the first element, and
both are children of the same parent element.*/

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li> // The sibling 
  <li>Two</li> // This adjacent sibling will be red
  <li>Three</li>
</ul>

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