Something about CSS-selectors
HTML
<p>Неразрывный другим тегами и id-шниками параграф текста, с определённым количеством интересных css-стилей</p>
<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>
CSS
/* CSS styles - nothing of interest */
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%;
}
/* Сделать каждый 6-й элемент красным */
.elem:nth-child(6){
background-color:#cb6364;
}
/* Стиль элемента, который содержит тег span */
.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;
}
/* Значение атрибута должно начинаться с "bar". т.к. это соответствует двум вышеописанным элементам*/
.elem[data-foo^=bar]{
width: 16px;
height: 16px;
margin: 11px;
}
/* Элемент, следующий после того, у которого прописан в атрибуте data-foo="bar2"*/
.elem[data-foo=bar2] + .elem{
background-color:#78ccd2;
}
