How to Target Only Immediate Children in CSS and MooTools?

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

When working with nested elements, it's often necessary to target immediate children and exclude other descendant elements that share the same class or ID. In CSS, this can be challenging to achieve.

The selector ul > li targets only the immediate children of

elements, excluding any nested
• elements within sublists. This can be useful for styling the top-level list items while leaving nested items unaffected. For example:

  #parent > li {
    color: red;
  }

  However, it's important to note that this selector is not supported in IE6. To maintain backwards compatibility, a workaround is to use the following approach:

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

  MooTools-Specific Issue:

  In your provided MooTools code, the getElementsByElelements() method includes both immediate children and descendants. To target only immediate children, use getChildren() instead:

  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++;
          });
      });
  }

  By using getChildren(), you can ensure that the numbering is limited to the immediate child elements of each nested

  , resolving the issue you were encountering.

  The above is the detailed content of How to Target Only Immediate Children in CSS and MooTools?. For more information, please follow other related articles on the PHP Chinese website!