CSS Tutorial – 08 – Other Selectors
Inheritance
Inheritance makes certain styles apply not only to the specified element, but also to all elements inside of it. For example, the color property will be inherited, while the border property will not. This is usually the intended behavior, making inheritance very intuitive. A property can also be given the value “inherit” to use the same value as the parent element has for that property.
p { border: inherit; }
Hierarchy
An HTML document can be thought of as a tree with the <html> element as the root. Each element fits somewhere on this tree and every element is either a parent or a child of another element. Any element above another one is called an ancestor and the element directly above is the parent. Similarly, an element below another one is called a descendant and the one directly below is a child.
Adjacent selector
The adjacent selector selects an element if it comes directly after another element.
/* Selects paragraphs that come after other paragraphs */ p+p { color: red; }
Descendent selector
The descendent selector matches an element if it is the child or grandchild of another element.
/* Selects paragraphs descending from body */ body p { background: gray; }
Direct child selector
The direct child selector selects only elements that are the immediate children of another element.
/* Selects paragraphs that have div as their parent */ div > p { text-align: center; }
Universal selector
The universal selector (*) matches all elements in the document.
/* Selects all elements */ * { text-transform: uppercase; }
If you like this tutorial please +1 it: