Home/ Questions/Q 8160913
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T18:23:03+00:00

I am working on a project with an example that could be simplified to

  • 0

I am working on a project with an example that could be simplified to the following. What do you call the name of the technique being used in the CSS?

<html>
    <head>
        <style type="text/css">
        #numberone #numbertwo #numberthree
        {
            color: red;
        }
        </style>
    </head>
    <body>
        <div id="numberone">
            <div id="numbertwo">
                <div id="numberthree">
                    This is red
                </div>
            </div>
        </div>
        <div id="numberthree">
            This is not red
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I assume you are referring to the use of descendant combinators to target an element with a specific ancestor structure. From the spec:

    A descendant combinator is whitespace that separates two sequences of
    simple selectors. A selector of the form “A B” represents an element B
    that is an arbitrary descendant of some ancestor element A.

    I’m going to modify your CSS to use class selectors rather than ID selectors, since ID values have to be unique in a document. This example will select elements with the class name numberthree that are descendants of elements with the class name numbertwo that are descendants of elements with the class name numberone:

    .numberone .numbertwo .numberthree {
    color: red;
}

    Whereas this example will select all elements with the class name numberthree regardless of their ancestors:

    .numberthree {
    color: red;
}

    So given your example markup (again, modified to use classes) the following would apply:

    <div class="numberone">
    <div class="numbertwo">
        <div class="numberthree">
            This is red for both snippets above
        </div>
    </div>
</div>
<div class="numberthree">
    This is only red for the second snippet above
</div>
    • 0