For example, in this code:
tr:last-child>td:first-child {
-webkit-border-radius: 0 0 0 25px;
border-radius: 0 0 0 25px;
}
'tr:last-child' means the last element of type tr. 'td:first-child' means the last element of type td. What does the '>' sign between them mean?
The > combinator separates two selectors and matches only those elements matched by the second selector that are direct children of elements matched by the first. By contrast, when two selectors are combined with the descendant selector, the combined selector expression matches those elements matched by the second selector for which there exists an ancestor element matched by the first selector, regardless of the number of "hops" up the DOM
https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors
in your case :
tr:last-child>td:first-child {
-webkit-border-radius: 0 0 0 25px;
border-radius: 0 0 0 25px;
}
it says direct child of tr
it means second selector should be direct child of first selector
example
<div>
<p>hi</p>
</div>
and
<div>
<section>
<p> hi </p>
</section>
</div>
if you do
div>p {
color : red;
}
first case will have color red as p is direct child(>) of div
while in second case its called descendant in general and is not a direct child
read more here https://developer.mozilla.org/en/docs/Web/CSS/Child_selectors
It this case it's pointing to the element inside the tr:last-child which is td:first-last. For which you are writing CSS properties...!
