CSS Combinators

❮ Prev Next ❯

Combinators are powerful tools used to select specific elements based on their relationship with other elements in the HTML structure.

Understanding and utilizing CSS combinators effectively can significantly enhance your ability to style and target elements within your web projects and experience.

In this chapter, we'll explore the essentials of CSS combinators to help you master this aspect of CSS selectors.

Descendant Selector (Whitespace)

The descendant selector, represented by a whitespace character, selects an element that is a descendant of another specified element.

It targets elements nested within other elements, regardless of their level of nesting.

Example: 


.container p {
  color:green;
}

Child Selector (>)

The child selector, represented by the >, symbol, selects an element that is a direct child of another specified element. It targets elements that are immediate children, excluding nested descendants.

Example: 


.container > ul {
  color :purple;
}

Adjacent Sibling Selector (+)

The adjacent sibling selector, represented by the + symbol, selects an element that is immediately preceded by a specified element. It targets elements that share the same parent and appear immediately after the specified element. 


h2 + p {
  color:brown;
}

General Sibling Selector (~)

The general sibling selector, represented by the ~symbol, selects elements that are siblings of a specified element and appear after it in the HTML structure. It targets elements that share the same parent and are not necessarily adjacent. 


h2 ~ p {
  color:blue;
}

Combination of Combinators

You can combine multiple combinators to create more specific and complex selectors.

This allows you to target elements based on their relationships within the HTML structure, providing granular control over styling. 


  nav ul > li {
    font-weight:500;
  }

Example 

<!DOCTYPE HTML>
<html>
    <head>
      <style>
      h2 ~ p {
        color:blue;
      } 
      
      .container p {
        color:green;
      } 
      
      .container > ul {
        color :purple;
      } 

      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
      <title>Title of the Document</title>
    </head>
    <body>
      <div class="container">
        <h3>welcome to Coding Koleji </h3>
        <p>This text will be styled css</p>
        <p>This is another paragraph</p>
      </div>
      <div class="container">
        <ul>
          <li>Mango</li>
          <li>Banana</li>
          <li>Orange</li>
        </ul>
      </div>
    </body>
  </html>

the combinators are essential tools for targeting and styling elements based on their relationships within the HTML structure.

By mastering the various combinators available in CSS selectors, you can create more precise and efficient CSS rules, enhancing the styling and layout of your web projects.

Experiment with different combinators and selector combinations to achieve the desired styling effects and improve your CSS proficiency.

❮ Prev Next ❯