Pseudo class inheritance
So I just discovered (the best way – by accident) that if you leave space between a selector and a pseudo class or element, the selector’s descendants will inherit the properties.
I’ve demonstrated what I mean in this pen:
.outer {
font-family: Helvetica, Arial, sans-serif;
}
.outer :hover {
background-color: red;
color: #ffffff;
}
.outer span {
height: 100px;
width: 100px;
float: right;
background-color: blue;
border-radius: 50px;
}
This works in recent versions FF and Opera on Mac. I haven’t really tested it beyond that, but given what I’ve seen from W3C documentation on pseudo elements and classes (specifically the example for :link
), this behavior looks universal. Granted, there’s nothing specifically stated.
Maybe I’ll bother to dig deeper.