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