CSS combinators are used to target specific areas of an HTML file. They are very useful as they prevent the programmer having to put too many “class=” attributes within the HTML itself.
This allows the HTML to be as clean as possible (minimal extra code) so that the layout and styling of the design as separated as much as possible.
The following is a small study of the CSS combinators to allow specific targetting of elements within the HTML.
General sibling selector ~
~ Selects the elements that follow the first selector element, where both elements share the same parent.
Examples:
Paragraph 6 & paragraph 7 follow the <article> tags, and both paragraphs and the article have the same parent, which in this case is the <body> tags.
Paragraph 5 follows the <div> tag, and both paragraph 5 and the <div> tags have the same parent, which in this case is the <article> tag.
Produces an interesting output, but still follows the sibling selector.
Remember, the “p ~ p” will select every <p></p> element that follows a <p></p> element where both <p></p> elements share the same parent.
In the case above, Paragraph 2 (which follows Paragraph 1
– it’s on the same level of hierarchy ) is selected because BOTH paragraphs have the same parent, which is the <article>.
Paragraph 4 (which follows Paragraph 3
– it’s on the same level of hierarchy ) is selected because BOTH paragraphs have the same parent, which is the <div>.
Paragraph 5 (which follows Paragraph 2 – it’s on the same level of hierarchy) is selected because BOTH these paragraphs have the same parent, which is the <article>.
Paragraph 7 (which follows Paragraph 6 – it’s on the same level of hierarchy) is selected because BOTH these paragraphs have the same parent, which is the <body>.
Paragraph 6 & 7 (which follows the <Article> tags – they’re on the same level of hierarchy) is selected because BOTH these paragraphs have the same parent as the <Article> tags, which is the <body>.
Adjacent sibling connector +
Selects the first tag (elements) adjacent to another tag, all of which are adjacent siblings
Examples:
Paragraph 6 (<p>) is the next tag adjacent to the <article></article> tags. Both the <p> and <article> tags are ‘on the same level’, they’re both direct children of the <body> tags.
Paragraph 5 <p> is the first tag after the <div> tags. Both the <p> and <div> tags are on the same level, they’re direct children of the <article> tags.
Paragraph 2 <p> is directly after a <p></p> and are direct children of the <article></article> tags.
Paragraph 4 <p> is directly after a <p></p> and are
direct children of the <div></div> tags.
Paragraph 7 <p> is directly after a <p></p> and are direct children of the <body></body> tags.
Looks for the first <div> tag after a <p> tag. Because there are several elements within the <div> tag, they are all displayed.
Child selector >
Selects all the immediate children of a specified element (specified tag).
Examples:
Paragraph 1, 2 & 5 are immediate children of the parent tag, in this case the article tag.
Paragraph 6 & 7 are immediate children of the body tag.
The div tag is an immediate child of the article tag.
The descendent selector
Paragraph 1, 2, 3, 4 & 5 are all direct children of the article tag.
I.e. the descendent selector select ALL the <p> tags that are children of the <article> tag.
Selects all the <div> tags that are children of the article tag.