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>div b { color: red; } /* every John is red */
div>b { color: red; } /* Only John 3 is red */