CSS
Selectors and Combinators
Here are the possible selectors and combinators:
Selector
CSS selectors are the patterns utilize for selecting the elements for style purpose.
| Selector | Description | Syntax |
|---|---|---|
| Type | It selects all the elements that match the given node name. | selector_name |
| Class | It selects all elements that have the given class attribute. | .class_name |
| ID | It selects an element based on the value of its id attribute. | #id_name |
| Universal | It selects all elements. | * universal_name|* *|* |
| Attribute | It selects the elements based on the value of given attribute. | [attr] [attr_value] |
Combinator
CSS combinators are used to explain the relationship between two or more selectors.
| Selector | Description | Syntax |
|---|---|---|
| Adjacent Sibling | The “+” combinator selects adjacent siblings, which means, the second element directly follows the first, and both share the same parent. | Selector + Selector |
| General Sibling | The ~ combinator selects siblings, which means, the second element follows the first, and both share the same parent | Selector ~ Selector |
| Child | The > combinator selects the direct children of the first element. | Selector > Selector |
| Descendant | The (space) combinator selects the nodes which are descendants of the first element. | Selector Selector |
| Column | The || combinator selects nodes which belong to a column. | Selector || Selector |