News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

CSS Tutorial – 08 – Other Selectors

CSS tutorials

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; }
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours