explain this css please
Question by max4ever
I am developing a css for printing in IE8, since i don’t have advanced css selectors( http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/ ) i concatenate them like this
I need to modifiy certain columns in a table(e.g. make 8th column red, 9th longer, 10 shorter… ecc)
The question is if i use
td+td+td{ /*instead of td:nth-child(3) on modern browsers*/
set something...
}
all the td from the 3rd one to the last one have that “set something”
so to fix it i have to do
td+td+td+td{
unset something
}
So i fixed it, but wondering why it acts like this?
Answer by Starx
+ denotes adjacent selectors.
td+td { } Generally means, if a td is preceded by another td then apply certain rule
One more example:
a + p {} Generally means, if p comes after a then apply certain rule.
So the style sheet you are using
td+td+td will apply the style to every td after the third elements. This might be a little complicated to be clear about. Lets see an example with sets of <td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
Your rule
td + td + td {
/* apply something */
}
The above rule will apply to two different sets
-
First one, adjacent sibling from
<td>1</td>to<td>3</td>matchestd+td+td -
Second one, adjacent sibling from
<td>2</td>to<td>4</td>also matchestd+td+td
So at the end, all the selectors from <td>3</td> end up getting the style
To cancel this effect, you reset the rule adding fourth selector on the style sheet.
i.e
td + td+ td + td {
/* cancel the effect
This will catch <td>-4</td> and apply the reset rule */
}
Hope that explains it.
Further Reading
