Navigate back to the homepage

CSS Combinators

Notebility
Css
January 15th, 2021 · 1 min read
CSS Combinators

Hello Friends,

Welcome To Notebility!

A combinator is something that explains the relationship between the selectors.

There are four different combinators in CSS:

  1. descendant selector (space)
  2. child selector (>)
  3. adjacent sibling selector (+)
  4. general sibling selector (~)

To understand the all >,+,~ sign in css to what is the meaning and how to use it in css.let us take a sample code to understand the signs.

1<div class="container">
2 <p>Parent element</p>
3 <div>
4 <p>Child element</p>
5 </div>
6 <p>Parent element</p>
7 <p>Parent element</p>
8 <p>Parent element</p>
9</div>

1) Descendant selector (space)

1.container p {
2 border: 1px solid #102f4f;
3 color:indigo;
4}

It is called a Descendant selector. It will target all p tags within the container class. That means it targets all <p> tags which are descendants of class="container".

1<div class="container">
2 <p>Parent element</p> <!-- affected element -->
3 <div>
4 <p>Child element</p> <!-- affected element -->
5 </div>
6 <p>Parent element</p> <!-- affected element -->
7 <p>Parent element</p> <!-- affected element -->
8 <p>Parent element</p> <!-- affected element -->
9</div>

2) child selector (>)

1.container > p{
2 border: 1px solid #102f4f;
3 color:indigo;
4}

It is called a child selector. It only selects the p tag which is direct children of a container class.That means it selects all <p> which is direct children of class="container".

1<div class="container">
2 <p>Parent element</p> <!-- affected element -->
3 <div>
4 <p>Child element</p>
5 </div>
6 <p>Parent element</p> <!-- affected element -->
7 <p>Parent element</p> <!-- affected element -->
8 <p>Parent element</p> <!-- affected element -->
9</div>

3) adjacent sibling selector (+)

1div + p{
2 border: 1px solid #102f4f ;
3 color:indigo;
4}

It is called an adjacent sibling selector.The adjacent sibling selector is used to select an element that is directly after another specific element.

That means it selects the <p> tag which is after the div and its child <p> tag.

1<div class="container">
2 <p>Parent element</p>
3 <div>
4 <p>Child element</p>
5 </div>
6 <p>Parent element</p> <!-- affected element -->
7 <p>Parent element</p>
8 <p>Parent element</p>
9</div>

4) General sibling selector (~)

It is called a General sibling selector. It is a general sibling combinator and similar to Adjacent sibling combinator.

The difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that are preceded by the former selector.

1div ~ p{
2 border: 1px solid #102f4f;
3 color:indigo;
4}

That means It will select all <p> elements that are siblings of <div> elements.

1<div class="container">
2 <p>Parent element</p>
3 <div>
4 <p>Child element</p>
5 </div>
6 <p>Parent element</p> <!-- affected element -->
7 <p>Parent element</p> <!-- affected element -->
8 <p>Parent element</p> <!-- affected element -->
9</div>

Thanks for reading…

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo

Tutorials

Categories

More articles from Infinitbility

What is Brute force Attack & How to prevent Brute force Attack?

What is Brute force Attack & How to prevent Brute force Attack?

A brute force attack is a trial and error method to get a login to the system or account. In this method, hackers try to guess the password. They try to guess passwords and try every combination hoping to guess correctly.

January 14th, 2021 · 5 min read
how to disable drawer on the drawer navigation screen?

how to disable drawer on the drawer navigation screen?

disable drawer swipe gesture on a specific screen

January 12th, 2021 · 1 min read
© 2020–2021 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]