Favour Peters blog

Css Combinators And Key Differences

Css Combinators And Key Differences

Favour Ledum Peters's photo
Favour Ledum Peters
·

4 min read

Table of contents

INTRODUCTION

CSS Combinators is one of the vital topics to understand in CSS. In a case where you are writing a bulky code, which is common to encounter while coding, while styling with CSS you probably would want to style a specific area or part of your HTML which might be repeated in some parts, so while styling a particular area of the code other pars may be affected and we all know how frustrating that could be.

COMBINATORS

Combinators are useful methods of targeting a particular element or elements in your code while styling. In order to understand combinators, you ought to have a good knowledge of the family map of HTML elements. There are basically four types of combinators, but before we go into that, we should have the knowledge of the HTML family map, do I will discuss that before going into the types of combinators in CSS.

HTML FAMILY MAP

The HTML family map is easy to understand because it has the description of a regular family. Just like a regular family has a Parent, Child, Grandchild and others, HTML family is exactly like that. The example below will give you a better understanding on that.

<div> <!-- div is a Parent -->
        <h1>Favour Peters Article</h1> <!-- H1 is a child of div -->
        <p>CSS Combinations <!-- p is a child of div and also a sibling of h1 -->
            <section> <!-- section is a child of p and a grandchild of div -->
                HTML family
            </section>
        </p>
</div>

Study the above example and read the comments that follows to understand better.

TYPES OF CSS COMBINATORS

DESCENDANT COMBINATOR

The descendant combinator is represented by spaces. Just as the name “descendants”, all descendants of an element selected will be affected by the styling. Most web designers who use descendant selector are aimed at target a particular element in a block of code. The example below will be having two list containers containing lists, the usefulness of this combinator will be clearer to you. I will give the HTML code and our CSS styling so you can have a better understanding.

<!-- Unordered list(ul) -->
    <ul>
        <li>Favour</li>
        <li>Peters</li>
    </ul>
    <!-- Ordered list(ol) -->
    <ol>
        <li>Orange</li>
        <li>Apple</li>
    </ol>

/* Using this will affect both list */
li{
    color: red;
}

/* Using this will affect only lists in the unordered list(ul) */
ul li{
    color: blue;
}
/* Using this will affect only lists in the ordered list(ol) */
ol li{
    color: green;
}

The “ul li” and “ol li” are descendants combinators with spaces between them. Any list that is a descendant of either “ul” or “ol” will be affected, even a grandchild or a great-grandchild will also be affected as long as they are descendants of a particular element. Carefully examine the above code for better understanding.

CHILD COMBINATOR

The symbol for the child combinator is the greater than sign “>”. This combinator affects only the children so a specific element. 

<div>
        <p>Favours</p> <!-- Child of div -->
        <p>Article</p> <!-- Child of div -->
        <section>
            <p>HTML example</p> <!-- Grandchild of div -->
        </section>
        <p>combinators</p> <!-- Child of div -->
</div>

/* Only specified-children(p) of div will affected */
div > p{
    color: blue;
}

In a situation where you want to target only specific children of a particular element, the child combinator is very useful. From the example above, only Favours, Article, and combinators will be affected by the styling of blue color.

ADJACENT SIBLING COMBINATOR

The symbol for the adjacent sibling combinator is “+”. This combinator targets only one sibling after it. Any sibling before the element will not be affected. 

<p>Hashnode</p> <!-- Sibling before the div -->
<div>
        <p>Favours</p> 
        <p>Article</p> 
        <section>
            <p>HTML example</p>
        </section>
        <p>combinators</p> 
</div>
<p>Community</p> <!-- Sibling after the div -->
<p>Learn more</p> <!-- Sibling after the div -->

/* Only one specified-sibling(p) after div will affected */
div + p{
    color: blue;
}

From the above example, only “Community” will have the effect of the styling. Note: Only one sibling that comes after the specified element will be have the effect of the styling.

GENERAL SIBLING SELECTOR

The symbol of the General sibling selector is “ ~ ”. This combinator targets all siblings after it and all siblings before it will also not be affected.

    <p>Edpresso</p> <!-- Sibling before the div -->
    <div>
        <p>Favours</p> 
        <p>Article</p> 
        <section>
            <p>HTML example</p>
        </section>
        <p>combinators</p> 
    </div>
    <p>Community</p> <!-- Sibling after the div -->
    <p>Learn more</p> <!-- Sibling after the div -->

/* All specified-siblings(p) after div will affected */
div ~ p{
    color: blue;
}

Note: All specified siblings after the div will have the effect of the blue color.

KEY DIFFERENCES BETWEEN THE COMBINATORS

  1. The Descendant combinators has effects on all descendants (children, grandchild and so on) of a specified element while the child selector has effect on only the children of the specified selector.
  2. The Adjacent sibling combinator has effect on only one of the siblings that comes after the specified element while General sibling combinator has effect on all the siblings that comes after the specified element.
CSSHTMLCSS3