Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

Combinators in css


Combinators in css:-


this define relationships between selectors.

A CSS selector can connect to more than one simple selector. Between the simple selectors, we can be the include a combinators.

There are four ways combinators in CSS:-
  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

    • Descendant Selector:-

    The descendant selector is matches all the elements that are descendants of a defined element.

    <style>
div p {
  background-color: blue;
}
</style>


<div>
  <p>Code family.</p>
  <p>Code family.</p>
  <section><p>Code family.</p></section>
</div>

<p>Code family</p>
<p>Code family</p>

    Child Selector;-

    The is child selector selects all elements in the html and that are the children of a defined element.


    <style>
div > p {
  background-color: blue;
}
</style>

<div>
  <p>Code family.</p>
  <p>Code family.</p>
  <section><p>Code family</p></section> 
  
  <!-- not Child but Descendant -->
  
  <p>Code family</p>
</div>

<p>Code family.</p>
<p>Code family.</p>

    Adjacent Sibling Selector:-

    selects all elements in html and that are the adjacent siblings of a defined element.

    <style>
div + p {
  background-color: yellow;
}
</style>


<div>
  <p>code family.</p>
  <p>code family.</p>
</div>

<p>code family.</p>
<p>code family.</p>

    General Sibling Selector in css:-


    <style>
div ~ p {
  background-color: yellow;
}
</style>


<p>code family</p>

<div>
  <p>code family</p>
</div>

<p>code family</p>
<code>code family</code>
<p>code family</p>


    More Topics