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:
Code:.button > span {
| SitePoint Sponsor |
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:
Code:.button > span {
The > means 'direct child' rather than the usual 'descendent'.Originally Posted by reedbird8
So in the example you've given, it would match
<div class="button">It would match <span>this text here</span></div>
<div class="button"><p>But it would not match <span>this text here</span></div>
because on the second line, the <span> is a grandchild of <... class="button">, not a child.
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
Thanks, makes sense now!
what about use of the "*"?
Code:.report_tools * {
* 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
Code css:body * {font-size:90%;}HTML Code:<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>
Any posts I write in Arial are on my mobile phone, so please excuse typos etc.
Any posts I write in Verdana are on a PC, so feel free to berate me mercilessly for any mistakes
Interesting. Thanks for the lesson!
Posting Permissions
Reply With Quote
Bookmarks