CSS Selector for Targeting Only Immediate Children and Not Other Identical Descendants

CSS selector for targeting only immediate children and not other identical descendants

ul > li

only does the immediate children. So, for example, to do only the top level list elements you could use:

#parent > li

Note: this isn't supported on IE6.

The common workaround for backwards compatibility is to do something like this:

#parent li { /* style appropriately */ }
#parent li li { /* back to normal */ }

It's more tedious because you have to apply styles and then turn them off (and you may not necessarily know what the old values are) but it's the only IE6-friendly pure CSS workaround there is.

Edit: Ok you have a MooTools specific issue. getElements() returns all descendants, not just immediate children. Try using getChildren().

var drop = function(el){
    el.getParents('ul').reverse().each(function(item){
        var posCount = 1;
        item.getChildren("li").getElements("a span[class=position]").each(function(pos){
                pos.set('text', posCount);
                posCount++;
        });
    });
}

or something like that.

Select an element without selecting descendants

Use the CSS child combinator >:

.settings > ul > li > i {
  opacity: 0.5;
}

<div class="settings">
  <ul>
    <li>
      <i>Select this element</i>
      <ul>
        <li>
          <i>but not this one</i>
          <span></span>
        </li>
        <li>
          <i>or not this one</i>
          <span></span>
        </li>
      </ul>
    </li>
  </ul>
</div>

Apply css rule on everything but not a selector and its children

This should target any direct child of .parent that doesn't have the class of child as well as its descendants:

.parent> :not(.child),
.parent> :not(.child) * {
  background-color: red;
}

<div class="parent">
  <div class="child">
    <div>inside</div>
    <div>inside2</div>
  </div>
  <div>outside</div>
  <div>
    <div>outside!</div>
  </div>
</div>

Is there a CSS selector for the first direct child only?

What you posted literally means "Find any divs that are inside of section divs and are the first child of their parent." The sub contains one tag that matches that description.

It is unclear to me whether you want both children of the main div or not. If so, use this:

div.section > div

If you only want the header, use this:

div.section > div:first-child

Using the > changes the description to: "Find any divs that are the direct descendents of section divs" which is what you want.

Please note that all major browsers support this method, except IE6. If IE6 support is mission-critical, you will have to add classes to the child divs and use that, instead. Otherwise, it's not worth caring about.

CSS selector for selecting the last two children, without knowing how many items are in the list

ul li:nth-last-child(-n + 2) {
    /* .. */
}

Select all descendant of one class except those inside another class (and vice versa)

Here is a simple solution with CSS variables. Check the following question for more details: CSS scoped custom property ignored when used to calculate variable in outer scope

* {

  margin: 0.2em 0;

  width: fit-content;

}

div {

  margin-left: 1em

}

p {

  background: var(--c);

}

.cyan {

  --c:cyan;

}

.orange {

  --c:orange;

}

<div class="orange">

  <p>Orange</p>

  <div>

    <p>Orange</p>

    <div>

      <p>Orange</p>

      <div class="cyan">

        <p>Cyan</p>

        <div>

          <p>Cyan</p>

        </div>

      </div>

    </div>

  </div>

</div>

<div class="cyan">

  <p>Cyan</p>

  <div>

    <p>Cyan</p>

    <div>

      <p>Cyan</p>

      <div class="orange">

        <p>Orange</p>

        <div>

          <p>Orange</p>

        </div>

      </div>

    </div>

  </div>

</div>

---

Related Topics