CSS combinators

      No Comments on CSS combinators

CSS combinators are something that explains the relationship between the selectors.CSS selectors can be a combination of two or more simple selectors. Combinators are added between simple selectors to show relation between them.

Commonly use combinators are

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

CSS combinators-understanding HTML family tree

Styling tags within tags

Html has a family relation between its elements.

    The possible relations are:

  • Ancestors: A tag that wraps another tag is an ancestor.
  • Descendant: A tag inside a tag in a descendant.
  • Parent: Closet ancestor of a tag is its parent.
  • Child: A tag direclty enclosed by another tag is its child.
  • Siblings: Chlidren of the same tag are siblings.

CSS combinators
HTML family tree

  1. Considering the HTML family tree, <html> is ancestor of all elements. <body> is ancestor of <h1> , <p> and <strong> tag.
  2. <body> and <head> are descendants of <html>
  3. <h1>,<p> and <strong> are descendant of <body>.
  4. <html> is parent of <body> and <head> only (and no other element).
  5. <p> is parent of <strong>
  6. <h1> and <p1> are children of <body> but not <strong> , as it is not direclty wrapped by <body>.
  7. <body> and <head> are siblings, so do <h1> and <p> are(ones having same parent).

Descendant selectors

The descendant selector matches all elements that are descendants of a specified element.

Consider an example:

p strong
 {
   color:red;
   padding:15px;
 }

The above selector will select all <strong> elements who are descendants of <p>.
Consider another example:

<style>
h1 strong
 {
   color:red;
   padding:15px;
 }
</style>
<div style='border:solid 1px lightgray;padding:5px;'>
<strong>I am not descendant of <h1></strong>
<h1>Heading</h1>
<strong>I am descendant of <h1></strong>
</div><br>
I am not descendant of <h1>

Heading

I am descendant of <h1>

The above selector will select all <strong> elements who are descendants of <h1>.

Child selectors

The child selector selects all elements that are the immediate children of a specified element.(>)

Consider an example:

<style>
p> strong
 {
   color:red;
   padding:15px;
 }
</style>
<div style='border:solid 1px lightgray;padding:5px;'>
<strong>I am not child of <p></strong>
<h1>Heading</h1>
<strong>I am child of <p></strong>
</div><br>
I am not child of <p>

Heading

I am child of <p>

Adjacent sibling selectors

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element.Adjacent selector uses + sign to show relationship among elements.

Consider an example:

<style>
p + strong
 {
   color:red;
   padding:15px;
 }
</style>
<div style='border:solid 1px lightgray;padding:5px;'>
<strong>I am not a sibling  of <p></strong>
<h1>Heading</h1>
<p>content..</p>
<strong>I am sibling of <p></strong>
</div><br>
I am not a sibling of <p>

Heading

content..

I am sibling of <p>

Leave a Reply

Your email address will not be published. Required fields are marked *