TABLES OF CONTENTS
- Definition/Introduction
- Types of Combinators
- Descendant Combinator (space)
- Child Combinator ( > )
- Adjacent Siblings Combinator ( + )
- General Sibling Combinator ( ~ )
- Conclusion
DEFINITION/INTRODUCTION:
To put it in a simple term, CSS Combinators are used to
combine more than one CSS selectors. This involves the use
of white space (), Plus sign ( + ), Greater than ( > ) or Tilde Sign (~).
These signs are placed in between specified tags.
See syntax below.
TYPES OF COMBINATORS:
CSS Combinators are mainly group into four types, namely:
- Descendant Combinator (space)
- Child Combinator ( > )
- Adjacent Siblings Combinator ( + )
- General Sibling Combinator ( ~ )
SIMPLE ILLUSTRATIONS TO EXPLAIN CSS COMBINATORS
NOTE: From the above illustration each rectangle boxes represent HTML Tags. The background color of orange represents tags that has been targeted by CSS combinators.
IMAGE ONE: illustrate Descendant Combinators. Notice how children and ground-children tags are set to orange.
IMAGE TWO: illustrate Child Combinators. Notice how only the direct children are set to orange
IMAGE THREE: illustrate Adjacent Siblings Combinators. Notice how only the first child of the direct adjacent sibling is set to orange.
IMAGE FOUR: illustrate General Siblings Combinators. Notice how all the direct Children adjacent siblings are set to orange.
For better understanding let’s take a look at each combinators with some code examples one after the other.
DESCENDANT COMBINATORS
Descendant Combinators are used to target specific tags on the webpage. This is done by first specifying the parent tag name, id or class name followed by a single white space , and then the child or descendant tag.
When using the descendant combinator, have in mind that your CSS rules will affect every tags that is nested in the specified parent tags. This might be direct child, grand-children or great grand-children.
if this sounds confusing, wait as we explain with some code examples.
type the code below and run on your browser.
<body>
<div>
<div>CSS combinators</div>
<ul>
<li>This is first-child ul</li>
<li>This is second-child ul</li>
<li>This is third-child ul</li>
<li>This is fourth-child ul</li>
<span>
<div>
<li>Grand first children of ul</li>
<li>Grand second children of ul</li>
<li>Grand third children of ul</li>
</div>
</span>
</ul>
<li>Not a child of ul</li>
<li>Also not a child of ul</li>
<li>Yes! Not a child of ul</li>
</div>
<li>Its seems like am alone here!</li>
</body>
Our HTML code examples above consist of a <ul> tag wrapped inside a div tag with five direct children, four of which are <li> tags and a <span> tag. The <span> tag has a direct child of
a <div> tag, which also have 3 direct children of <li> tags. These <li> tags are great grand-children of the <ul> tag, making them descendants of the <ul> tag.
Type the code below and run on your browser.
ul li {
background-color: brown;
}
From the CSS code example above, we targeted the <ul> and <li> tags.
and we set a background-color of brown to all the <li> tags which happens to be either children, grand or great-grand children
Your code should look like this on your browser.
CHILD COMBINATOR
CSS Child Combinators unlike Descendant Combinators, target the direct child or children of the specified parent.
This done by inserting the greater than (>) sign in between the parent and child tag you which to target.
From the HTML code example we have, the<li> tags which happens to be the direct children of the <ul> tag are the ones select. As their background is set to brown.
Type and run the css code below
ul > li {
background-color: brown;
}
Your Browser out put
The other <li> tags which are descendant of the <ul>tag got ignored. As you've see from your browser output.
ADJACENT SIBLINGS COMBINATOR
Compare to Child Combinators and Descendant Combinators, Adjacent Siblings Combinators only target tags that are direct sibling of the specified tag NOT the direct child.
That is, a tag that is nearest to the specified tag.
This done by inserting the plus (+) sign in between the tags that are of the same siblings and directly next or close to each other.
If the two tags being combined together with adjacent siblings are not nearest to each other, the code will not run.
In our case from the HTML code example we have, the first <li> tag which happens to be the direct sibling of the <ul> tag is the one selected. As it background is set to brown.
Type the code below and run on your browser.
ul + li {
background-color: brown;
}
your code should look like this on your browser.
Note: the selected tag is outside of the <ul> tag and directly next to it. The other <li> tags which are descendant of the <ul> tags and <li> that are not directly next to <ul> tag got ignored.
For better understanding try example two.
Type and run the code below
<body>
<div>one</div>
<p>two</p>
<p>three</p>
<p>four</p>
<span>five</span>
<p>six</p>
</body>
div + p {
background-color: yellow;
}
your Code should look like this on your browser
Notice: first <p> tag nearest to the <div> got selected. While others got ignored. This is what adjacent siblings combinators means.
GENERAL SIBLINGS COMBINATOR
We’ve talked about Child Combinators, Descendant Combinators, and Adjacent Siblings Combinators. And we’ve seen how this Combinators are used to style the web page. This brings us to the last one. the General Sibling Combinator.
The General Sibling Combinator is used to target ALL tags that are adjacent siblings of the specified tags.
That is the tags that are nearest to the specified tag.
This done by inserting the tilde (~) sign in between the tags that are of the same siblings and directly next or close to each other (Adjacent).
If the two tags being combined together with General Siblings Combinators are not nearest to each other, the code will not run.
from the HTML code example, we have above, all the <li> tags which happens to be direct siblings of the <ul> tag are the ones selected. As their background is set to brown.
Note: the selected tags are outside of the <ul> tag.
Type and run the code below
ul ~ li {
background-color: brown;
}
your code should look like this on the browser
Notice: the last <li> tags is ignored. This is because the tag is not adjacent to the <ul> tag.
For better understanding try example three.
Type this code and run
<body>
<div>one</div>
<p>two</p>
<p>three</p>
<p>four</p>
<span>five</span>
<p>six</p>
</body>
div ~ p {
background-color: yellow;
}
your code should look like this
Notice: number five is not selected. this is because it’s a <span> tag not a <p> tag.
CONCLUSION:
Alright! We’ve come to the end of this tutorial.
Thanks for taking your time to read this blog post about CSS Combinators.
Feel free to ask questions. I’ll gladly reply back.
You can find me on Twitter and other social media @ocxigin.
Cheers