When your browser supports CSS4 selector :has(), the winning statement will be revealed.
A Pen by Liam Conrad on CodePen.
<div class="has"> | |
<h1 class=".works">:has() CSS4 Selector<br>It's working!</h1> | |
</div> | |
<div class="hasnt"> | |
<h1 class=".not-working">:has() CSS4 Selector<br>It isn't working just yet.</h1> | |
</div> |
When your browser supports CSS4 selector :has(), the winning statement will be revealed.
A Pen by Liam Conrad on CodePen.
@import url(http://fonts.googleapis.com/css?family=Raleway:300,400); | |
body { | |
background-color: #556; | |
} | |
div { | |
width: 70vmin; | |
height: 10vmin; | |
margin: -5vmin -35vmin; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
border-radius: 2vmin; | |
overflow: hidden; | |
&.hasnt { | |
background-color: tomato; | |
} | |
&.has { | |
background-color: mediumspringgreen; | |
} | |
} | |
h1 { | |
position: absolute; | |
top: 50%; | |
height: 6vmin; | |
width: 100%; | |
margin: -3vmin auto 0; | |
font-size: 3vmin; | |
line-height: 3vmin; | |
text-align: center; | |
font-family: "Raleway"; | |
font-weight: 400; | |
letter-spacing: 0.1rem; | |
color: white; | |
} | |
.has { | |
display: none; | |
&:has(.works) { | |
display: block; | |
&+.hasnt:has(.not-working) { | |
display: none; | |
} | |
} | |
} |