Advanced CSS example

1. css inherited: Set the text-color for <span> elements to blue, except those inside elements with class="extra":
span {
    color: blue;
    border: 1px solid black;
}
.extra span {
    color: inherit;
}

2. CSS group selector,  each h1, h2 and p are independent
h1, h2, p {
    text-align: center;
    color: red;
}

3. CSS class

p.test1{ color: blue; } p.test2{ color:red; }

html
<p class="test1">test1 CSS code!</p> 
<p class="test2"> p.test2 CSS code!</p>

4. space between selector
.test div{
 color: blue;
}
Select any div element that is a child of any element with a class name of "test"
<p class="test">
<div></div>
</p>

5. ">" greater sign selector - direct descendant/child

<div>
  <p><b>John 1</b></p>
  <p><b>John 2</b></p>
  <b>John 3</b>
</div>

And in CSS

div b { color: red; } /* every John is red */
div>b { color: red; } /* Only John 3 is red */