What Is The Replacement for The Child Selector

What is the replacement for the child selector?

I've come across something of a hack: http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/
Using the 'star html' hack for IE (6 and below) in combination with this allows me to select the direct child. Let's say we want to apply a padding-top of 10px to the direct child, F, of E:

* html body E F
{
    /* apply style here for IE 6 */
    padding-top: 10px;
    /* This applies the style to every F inside of E */
}
* html body E * F
{
    /* undo style here */
    padding-top: 0px;
    /* This will undo the style set above for every F that has something in between itself and E, that is, every F besides the direct children of E */
}

I do appreciate your responses so far but as much as I hate to accept my own answer, this was the solution I eventually settled on. Thanks guys!

Nth-child() selector alternative solution in CSS

You can use the :first-child and adjacent sibling selector. They work from IE7+.

Notes:

• You shouldn't be using h1 tag as a direct child of any ul. But if that's how your structure is and you can't modify it then you can use :first-child + li, :first-child + li + li.
• :nth-child(-n+3) generally would select the first 3 children of a parent. In your demo, since the first child is a h1 and since you've also attached the element type (li) to the nth-child(-n+3) the h1 doesn't get selected and only the two li that follow it are selected. The selector that I've mentioned in Note 1 will do the same (that is, it will select the first two li that follow the first child - which is, the h1 tag - irrespective of how many children the ul has).

Demo 1: (without any other tag directly inside ul)

li:first-child,li:first-child + li {  color: red;}

<ul>  <li>first</li>  <li>second</li>  <li>third</li>  <li>fourth</li>  <li>and so on..</li></ul>

nth-child selector replacement in IE

Place this script at the end of your page. It assumes the first tbody found, but you could modify this to whatever offset (or to handle multiple tbodys), or even make things easier by targetting with a specific id.

<script>
(function(){
  var 
    tby = document.getElementsByTagName('tbody')[0],
    trs = tby.getElementsByTagName('tr'),
    i, l = trs.length
  ;
  for ( i=0; i<l; i++ ) {
    if ( (i + 1) & 1 ) {
      trs[i]
        .getElementsByTagName('td')[0]
          .style
            .backgroundColor = '#f0f0f0'
      ;
    }
  }
})();
</script>

The above could be minified if you are worried about bytes.

jQuery alternative to nth-child selector that supports classes

You can filter the items based on the index they have in the parent, in relation to other items with the same class

$('.item').filter(function(_,item) {    return ($(item).siblings('.item').addBack().index(item)+1) % 3 === 0;}).css('color','red');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">    <div class="randomclass">...</div>    <div class="item">Item 1</div>    <div class="item">Item 2</div>    <div class="item">Item 3</div>    <div class="randomclassdifferentname">...</div>    <div class="item">Item 4</div>    <div class="item">Item 5</div>    <div class="item">Item 6</div>    <div class="item">Item 7</div>    ...</div><div class="parent">    <div class="anotherclass">...</div>    <div class="item">Another item 1</div>    <div class="item">Another item 2</div>    <div>...</div>    <div class="item">Another item 3</div>    ...</div>

What is the new proper way to use a child selector with a context node in jQuery?

The reason they are saying:

Note: The $("> elem", context) selector will be deprecated in a future release. Its usage is thus discouraged in lieu of using alternative selectors.

Is due to the comma followed by the context in the selector. E.g. $("> elem") is fine however, $("> elem", context) will be deprecated.

$("> elem", context) is the same as $(context + "> elem").

A correct way of obtaining children and grandchildren is

$("elem").children('.child').children('.grandchild');

or

context.children('.child').children('.grandchild');

or

context.find('> .child > .grandchild');

Alternative for nth-child for older IE browsers

You can use jQuery's :nth-child() selector;

$("li:nth-child(even)") // target even li's
$("li:nth-child(odd)") // target odd li's
$("li:nth-child(5n)") // target the fifth li

Simple HTML DOM - Child Selectors (CSS)

Well, this should (must, actually:)) work (tested on 4 divs):

foreach($html->find('div.element') as $element) {

$paragraph=$element->find('p',0);

    if($paragraph==$element->first_child())
    echo $paragraph;

}

IE8 :nth-child and :before

You can (ab)use the adjacent sibling combinator (+) to achieve this with CSS that works in IE7/8.

See: http://jsfiddle.net/thirtydot/LvvNL/64/

/* equivalent to li:nth-child(1) */
#nav-primary ul li:first-child a {
    border-top: 5px solid red;
}
/* equivalent to li:nth-child(2) */
#nav-primary ul li:first-child + li a {
    border-top: 5px solid blue;
}
/* equivalent to li:nth-child(3) */
#nav-primary ul li:first-child + li + li a {
    border-top: 5px solid green;
}​

You cannot emulate more complex variations of :nth-child() such as :nth-child(odd) or :nth-child(4n+3) with this method.

---

Related Topics