CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced

CSS Combinators

❮ Previous Next ❯

CSS Combinators: Targeting Elements by Relationship

CSS combinators define the relationship between two selectors. While simple CSS selectors are patterns used to select elements based on their tag, class, or ID, a CSS selector can also be complex, consisting of more than one selector connected using combinators.

Understanding these combinators is essential for precise and efficient styling in CSS. It allows you to target elements based on their context and relationships within the HTML Document Object Model (DOM) structure.

Types of CSS Combinators

There are four different combinators in CSS:

  1. Descendant selector (space)
  2. Child selector (>)
  3. Adjacent sibling selector (+)
  4. General sibling selector (~)

Let's explore each of these in detail.

1. Descendant Selector (space)

The descendant selector selects all elements that are descendants of a specified element. These elements can be any level deep within the specified element (children, grandchildren, etc.).

Descendant Selector Example:

<!DOCTYPE html>
<html>
<head>
    <title>Descendant Combinator</title>
    <style>
        /* Targets ALL <p> elements inside a <div> */
        div p {
            color: navy;
            font-size: 24px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>Descendant selector property</div>
    <p>IntricateDevo (Outside div - not styled)</p>
    <div>
        <div>child div content</div>
        <p>Styled Descendant</p>
        <p>Another Styled Descendant</p>
    </div>
    <p>Outside Element</p>
</body>
</html>

2. Child Selector (>)

The child selector selects elements that are direct children of a specified element. This combinator is stricter than the descendant selector, as it only looks one level down the DOM tree.

Child Selector Example:

<!DOCTYPE html>
<html>
<head>
    <title>Child Combinator</title>
    <style>
        /* Targets ONLY <p> elements that are direct children of a <div> */
        div > p {
            color: navy;
            font-size: 24px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>Child selector property
        <p>I am a direct child (Styled)</p>
        <section>
            <p>I am a grandchild (Not Styled)</p>
        </section>
    </div>
    <p>Outside Element</p>
</body>
</html>

3. Adjacent Sibling Selector (+)

The adjacent sibling selector selects an element that is immediately next to a specified element. Both elements must share the same parent, and the targeted element must directly follow the first element.

Adjacent Sibling Selector Example:

<!DOCTYPE html>
<html>
<head>
    <title>Adjacent Sibling Combinator</title>
    <style>
        /* Targets the FIRST <p> immediately following a <div> */
        div + p {
            color: navy;
            font-size: 24px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <div>Adjacent sibling selector property</div>
    <p>Immediately follows div (Styled)</p>
    <p>Does not immediately follow div (Not Styled)</p>
    <div>
        <div>child div content</div>
        <p>Immediately follows nested div (Styled)</p>
    </div>
</body>
</html>

4. General Sibling Selector (~)

The general sibling selector selects all elements that follow a specified element and share the same parent. This can be useful for selecting groups of elements that come after a specific heading or container.

General Sibling Selector Example:

<!DOCTYPE html>
<html>
<head>
    <title>General Sibling Combinator</title>
    <style>
        /* Targets ALL <p> elements that follow a <div> and share the same parent */
        div ~ p {
            color: navy;
            font-size: 24px;
            font-weight: bold;
            margin: 0px;
            text-align: center;
        }
        div, p {
            text-align: center;
        }
    </style>
</head>
<body>
    <p>Before div (Not styled)</p>
    <div>General sibling selector property</div>
    <p>Follows div (Styled)</p>
    <p>Also follows div (Styled)</p>
    <section>
        <div>Nested div</div>
        <p>Follows nested div (Styled)</p>
    </section>
</body>
</html>

Summary

Understanding and using CSS combinators effectively can greatly enhance your ability to style web pages precisely.

Each combinator serves a unique purpose and can be utilized to target elements based on their relationships within the HTML structure. Mastering these combinators is essential for any web developer looking to create sophisticated, well-structured, and maintainable stylesheets.

Exercise

?

Which CSS combinator is used to select elements that are the direct children of a specified element?

❮ Previous Next ❯