I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.
Here’s the basic markup
<li> <video>...</video> <p>...</p> </li>
I wanted the paragraph to appear when the video is selected. So here’s the simple CSS
section#videolist li {
position:relative;
}
section#videolist li p {
display:none;
position:absolute;
bottom:-100px;
left:0;
}
section#videolist li video:focus+p {
display:block;
}
The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.