Improved selectors CSS
Currently, if you assign IDs to elements just to apply styles to them, you are most likely doing the wrong thing. CSS 2.1 and CSS3 have introduced some powerful selectors that can make your markup cleaner and your stylesheets cooler.
The following selectors are supported by all major browsers, including IE9 and above.
<div class="container">
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"><span></span></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem" data-foo="bar1"></div>
<div class="elem" data-foo="bar2"></div>
<div class="elem"></div>
<div class="elem"></div>
<div class="elem"></div>
</div>
p{
font-size: 16px;
width: 420px;
margin: 20px auto 0;
text-align:center;
}
.container{
width: 420px;
margin:50px auto 0;
overflow: hidden;
padding:5px;
}
.elem{
width:30px;
height:30px;
margin:4px;
background-color:#A0DFAC;
float:left;
}
.elem span{
position:absolute;
top:5px;
left:5px;
right:5px;
bottom:5px;
border:2px solid #fff;
}
p::first-letter{
background-color: #666;
color: #FFF;
font-size: 24px;
font-style:normal;
display: inline-block;
padding: 0 5px;
border-radius: 3px;
margin-right: 2px;
font-family: serif;
}
p::first-line{
font-size: 18px;
text-transform: smallcaps;
font-style: italic;
text-decoration: underline;
}
.elem:first-child,
.elem:last-child{
background-color:#948bd8;
}
.elem:nth-child(odd){
border-radius:50%;
}
.elem:nth-child(6){
background-color:#cb6364;
}
.elem:not(:empty){
background-color:#444;
position:relative;
-webkit-transform:rotate(25deg);
transform:rotate(25deg);
}
.elem[data-foo=bar1]{
background-color:#aaa;
}
.elem[data-foo=bar2]{
background-color:#d7cb89;
}
.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}
.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
}
