Selectors combinations

• , - grouping, allows to list several selectors
•   (space) - descendant combinator, allows to select all elements represent by second selector, if theirs have ancestor represents by first selector
• > - child combinator, allows to select all elements represent by second selector, if they direct child of elements represent by first selector
• ~ general sibling combinator allows to select all elements represents by second selector, if they follow element represent by first selector.
• + adjacent sibling combinator allows to select all elements represents by second selector, if they directly follow element represent by first selector.

Grouping

You can list several selectors for sharing same style by comma.

/* select elements h2 , h5 and p */
h2, h5, p {color: red;}

descendant combinator

Allows to select all elements represent by second selector, if theirs have ancestor represents by first selector. Ancestor means parent, or parent of parent and etc.

/* select all li elements that's inside of article element */
article li {
color: gray;
...
}

child combinator

Allows to select all elements represent by second selector, if they direct child of elements represent by first selector.

/* select all p inside div elements with class ads */
div.ads > p {
color: gray;
}

general sibling combinator

Allows to select all elements represents by second selector, if they follow element represent by first selector. It is not necessary, that follow immediately. Both share the same parent.

p ~ span {
  color: red;
}

<span>First line.</span>
<p>Text of paragraph.</p>
<code>Some text code.</code><br>
<span>Will be red text</span><br>
<code>More code...</code><br>
<span>Will be red text</span><br>

adjacent sibling combinator

Allows to select all elements represents by second selector, if they directly follow element represent by first selector. Both share the same parent.