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.

Leave a Reply

Your email address will not be published. Required fields are marked *