CSS Tutorial
CSS Grouping
The grouping of two selectors is defined with some rules in CSS.
These rules are referred to as CSS Grouping Rules.
CSS Selectors can be grouped in four:
- descendant selector - Selects elements that are descendant to a specific element (space)
- child selector - Selects elements that are immediate child to a specific element (>)
- next sibling selector - Selects element that is the next to a specific element (+).
- universal sibling selector - selects all elements that are a sibling to a specific element (~).
Descendant Selector
The descendant selector matches all elements that are descendants of a specific element. Using (space) in between the descendants and ancestors selector.
Syntax
ancestor-selector descendant-selector {
/* CSS defintions */
property: value;
}
The following example selects all <h1>
elements inside <div>
elements.
Example
Child Selector
The child selector selects all elements that are the "immediate" (immediate means "first level") children of a specific element. Using the >
symbol.
Syntax
parent-selector>child-selector {
/* CSS defintions */
property: value;
}
The following example selects all <h1>
elements that are immediate children of a <div>
element.
Example
Next Sibling Selector
The next sibling selector selects all elements that are the neighboring siblings of a specified element. Using the +
symbol.
Sibling elements must have the same parent element, and immediately following the parent element.
Syntax
currentSibling-selector+nextSibiling-selector {
/* CSS defintions */
property: value;
}
The following example selects all <h1>
elements that are placed immediately after <div>
elements.
Example
Universal Sibling Selector
The universal sibling selector selects all elements that are siblings of a specified element. Using the ~
symbol.
Syntax
currentSibiling-selector~otherSiblings-selector {
/* CSS defintions */
property: value;
}
The following example selects all <p>
elements that are siblings of <div>
elements:
Example
What You Should Know at the End of This Lesson
- You should be able to tell briefly what CSS Familiarity is all about.
- You should be able to style a child selector with CSS.
- You should be able to style a selector that is an immediate sibling of a specified element.
- If you enjoyed this tutorial, please share.