restrict first-child to only the first child and no descendants

Question

In the following snippet, I only want the first div after the legend which has the text one and nothing else but is selecting three also

.container fieldset div:first-of-type {
  border: 1px solid red;
}

<html>

  <body>
    <div class="container">
      <fieldset>
      <legen>blah</legen>
        <div>one</div>
        <div>two
          <div>three</div>
        </div>
        <div>three</div>
      </fieldset>
    </div>
  </body>

</html>

So you only want the "three" div and you have to use an `nth/first-` selector? There are no other options? — Paulie_D, Oct 10 '18 at 12:35
@dagda1 I didn't try to close your question I made it clearer. Move on. — Danny, Oct 10 '18 at 13:42

score 4 · Accepted Answer · answered Oct 10 '18 at 12:39

You mean you only want to select the div with "one" and not the div with "three" who is inside div "two", right?

Then use the direct descendant selector >

.container fieldset > div:first-of-type {
  border: 1px solid red;
}

<html>

  <body>
    <div class="container">
      <fieldset>
      <legen>blah</legen>
        <div>one</div>
        <div>two
          <div>three</div>
        </div>
        <div>three</div>
      </fieldset>
    </div>
  </body>

</html>

.container fieldset div:first-of-type {
  border: 1px solid red;
}

<html>

  <body>
    <div class="container">
      <fieldset>
      <legen>blah</legen>
        <div>one</div>
        <div>two
          <div>three</div>
        </div>
        <div>three</div>
      </fieldset>
    </div>
  </body>

</html>

restrict first-child to only the first child and no descendants

1 Answers1