Home/ Questions/Q 6963013
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T15:44:03+00:00

I thought the following selector would only match example b . Can someone explain

  • 0

I thought the following selector would only match example b. Can someone explain to me a little more about how CSS paths work?

body div span a{
    background:#000;
    color:#fff;
}

<body>
    <div><span><span><a href="#">example a</a></span></span></div>
    <div><span><a href="#">example b</a></span></div>
    <span><div><span><a href="#">example c</a></span></div></span>
</body>

A visual example or a more elaborated tree/paths with “this will be affected”, “this won’t” would be extremely helpful to me. A link to a good guide could also be interesting.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See the W3C specification for more information.

    To simplify your example, a selector div a { } will match any <a> tag which descends from a <div> tag, regardless of how many levels of ancestry separate the two tags.

    That is, div a { } will match any of the following:

    <div> <a>...</a> </div>

<div> <h2> <a>...</a> </h2> </div>

<div> <h2> <span> <a>...</a> </span> </h2> </div>

    If you want to match an <a> contained directly within a <div> with no other tags separating them, you need to use div > a, which matches only <a> tags that are direct descendants of a <div> tag.

    • 0