[ACCEPTED]-CSS Selectors - Selecting a specific child element-css-selectors

Accepted answer

Score: 10

With CSS3's :nth-child() it's easy to fulfill the "specific" criterion:

#shopping-cart-totals-table > tbody > tr:nth-child(2) > td:nth-child(2) .price

Or, an 4 alternative that works more in favor of 3 browser compatibility (does not use CSS3 2 selectors, assumes exactly two trs and two 1 tds):

#shopping-cart-totals-table > tbody > tr + tr > td + td .price

Score: 1

If you have the ability to change the output 12 of the shopping cart, you could add a class 11 to the <tr> tag, e.g. <tr class="row01">, <tr class="row02">, etc.

If you can't 10 change your back-end, then it's a choice 9 of front-end tech. The most cross-browser 8 method is to use jQuery to apply the row 7 classes. The other alternative, CSS3, isn't 6 supported by any current IE; given that 5 this is a shopping cart, you're probably 4 interested in the widest level of browser 3 support.

Something like:

$('#shopping-cart-totals-table tr').each(function(n){
    $(this).addClass('row'+n);
});

Alternatively, if 2 you're only interested in the third item, use 1 jQuery in the same way as CSS3:

$('#shopping-cart-totals-table tr:nth-child(2) .price').addClass('highlightClass');

Source: stackoverflow.com

[ACCEPTED]-CSS Selectors - Selecting a specific child element-css-selectors

css multiple class / id selectors?

Is there any way to specify a CSS shorthand for "all elements except the first/last"?

Select nth-child across multiple parents

What does .container.\31 25\25 mean in CSS?

Css Selector - Select all siblings until a certain sibling

How to use css first-child with :not()

What are the priorities among CSS selectors

Why doesn't this CSS :first-child selector work?

how to select given element AND all its children simultaneously?

CSS class and descendant selectors practices