Use of ">" in CSS?

HTML & CSS
1

Curious…came across something I hadn’t seen yet in CSS. (Granted, I’m pretty new at this).

Here is the bit of code, just haven’t seen the > symbol used before:

.button > span {
2

[font=verdana]The > means ‘direct child’ rather than the usual ‘descendent’.
So in the example you’ve given, it would match
`

It would match this text here

But it would not match [color=#dd0000]this text here[/color]

` because on the second line, the <span> is a grandchild of <... class="button">, not a child.[/font]
3

Thanks, makes sense now!

what about use of the “*”?

.report_tools * {
4

[font=verdana]* is the universal selector, which means that it matches anything. In that example, it would match any descendent element within something with class="report_tools", although it wouldn’t match the element with class="report_tools" itself and nor any text directly inside that element.

It’s a dangerous one to use, particularly as a descendent selector, because
(i) most of the time it’s unnecessary, because a lot of common properties are inherited
(ii) some properties can end up with compound nesting, such as font-size.
eg

body * {font-size:90%;}

<body>
<p>This text is at 90% of default <i>but this text is at 81%</i> and back up to 90%</p>
<ul><li>This text is at 81%</li>
    <li>and so is this, <b>but now we're at 73%</b></li>
</ul>
<div class="section">
<table>
<tbody><tr><td>and now we're right down to 59%</td></tr></tbody></table></div>

[/font]

5

Interesting. Thanks for the lesson!