CSS селекторы

В комментариях прозвучал вопрос, на который сложно ответить одним предложением и который требует наглядной иллюстрации:
Что значат эти знаки в CSS: >,~

body{ color:#333333; }
⇑⇑⇑
селекторсвойствозначение

CSS селекторы ещё не используются в полной мере и мы зачастую засоряем HTML-код ненужными классами и идентификаторами. В статье "Как использовать CSS" хорошо разобраны основные моменты. Здесь же будет рассмотрен вопрос несколько более углублённо. Нижеприведённые примеры не имеют поддержки в Internet Explorer 6, кроме контекстных селекторов.

Группу свойств можно задать только для тегов с определённым атрибутом.

<style type="text/css">
div[align] { color: red; }
</style>

<div> содержимое </div>
<div align="center"> содержимое </div>

Существуют 6 различных типов селекторов для атрибутов:
  1. [att=value] - атрибут должен иметь точное значение
    <style type="text/css">
div[align="center"] { color: red; }
</style>

<div> содержимое </div>
<div align="center"> содержимое </div>
  2. [att~=value] - атрибут должен иметь одно из значений, разделённые пробелами
    <style type="text/css">
div[title~="CSS"] { color: red; }
</style>

<div title="Публикация о CSS"> содержимое </div>
<div title="Селекторы в CSS"> содержимое </div>
  3. [att|=value] - для атрибута, после определённого значения которого следует дефис
    <style type="text/css">
div[class|="css"] { color: red; }
</style>

<div class="selectors-css"> содержимое </div>
<div class="css-selectors"> содержимое </div>
  4. [att^=value] - для атрибута, который начинается с заданного значения, например, стиль для внутренних ссылок
    <style type="text/css">
a[href^="http://shpargalkablog.ru/"] { color: red; }
</style>

<a href="http://htmlbook.ru/samcss/selektory-atributov"> анкор </a>
<a href="http://shpargalkablog.ru/2011/10/css-selectors.html"> анкор </a>
    или, для внешних ссылок оформим небольшую картинку (добавим псевдокласс :not)
    <style type="text/css">
a[target="_blank"]:not([href^="http://shpargalkablog.ru/"]) { background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjZBNEMyQzFFQjMyMTFFMEFFMDQ5RTQwMzY2RTI0QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjZBNEMyQzJFQjMyMTFFMEFFMDQ5RTQwMzY2RTI0QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGNkE0QzJCRkVCMzIxMUUwQUUwNDlFNDAzNjZFMjRBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGNkE0QzJDMEVCMzIxMUUwQUUwNDlFNDAzNjZFMjRBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj9w8uQAAABOSURBVHjajJDbCQAwCAO1dFg30m1T8iH0KQ0IQSQ5VAASEZBCTT7U05iZ3g7Y8pWkZKrEpL5D32obly+eBZxpPMzU4yXuDnJxZj/PEGAAPk46EE/MQmgAAAAASUVORK5CYII=) no-repeat center right;
  padding-right: 16px; }
</style>

<a href="http://updates.html5rocks.com/2012/06/The-amazing-powers-of-CSS" target="_blank"> анкор </a>
<a href="http://shpargalkablog.ru/2011/10/css-selectors.html"> анкор </a>
  5. [att$=value] - для атрибута, который заканчивается заданным значением, например, стиль для определённого типа изображения
    <style type="text/css">
img[src$=".png"] {
 background: red;
 }
</style>

<img border="0" height="154" width="200" src="http://1.bp.blogspot.com/-KGc11GwVqZc/To1-gX941rI/AAAAAAAACW0/EBg718lcfs8/s200/kot.png" alt="Кот"/>
    Кот
  6. [att*=value] - для атрибута, который содержит заданное значение, например, для ссылок 2011 года 
    <style type="text/css">
a[href*="2011"] { color: red; }
</style>

<a href="http://shpargalkablog.ru/2011/10/css-selectors.html"> анкор </a>

Контекстные селекторы - использование несколько селекторов, один из которых находится внутри другого.

<style type="text/css">
  div span { color: red; }
</style>

<div> содержание <span> содержимое </span></div>
<div> содержание <p> содержание <span> содержимое </span></p></div>

Дочерние селекторы - содержаться внутри друг друга именно в заданной последовательности.

<style type="text/css">
  div span { color: red; }
  div > span { color: green; }
</style>

<div><p><span> содержимое </span></p></div>
<div><span> содержимое </span></div>
Данные селекторы равносильны. В данном случае действует правило, что стили выполняются сверху вниз, то есть нижние имеют приоритет.

Соседние селекторы - элементы следуют непосредственно друг за другом, не разделённые другими тегами, находятся в одном контейнере.

<style type="text/css">
  em + strong { color: red; }
</style>

<p><em> содержимое </em> содержимое <strong> содержимое </strong></p>

<p><em> содержимое </em> <code> содержимое </code> <strong> содержимое </strong></p>
То есть если после тега em идёт тег strong, то для последнего будут применён красный цвет.

Комбинированные смежные селекторы - аналогично соседним, с той лишь разницей, что второй селектор не обязательно должен следовать за первым.

<style type="text/css">
  em ~ strong { color: red; }
</style>

<p><em> содержимое </em> содержимое <strong> содержимое </strong></p>

<p><em> содержимое </em> <code> содержимое </code> <strong> содержимое </strong></p>

Пример использования.



Совы
Лиса
Лисица
Пес
Лис
Обезьян
Леопард
Кот в сланце
Спящие собаки
<style type="text/css">
html {-webkit-animation: safariSelectorFix infinite 1s;}
@-webkit-keyframes safariSelectorFix {
0% {zoom:1;} 
100% {zoom:1;}
}

#cssplayGallery {position:relative; width:482px; margin:0 auto; height:382px; overflow:hidden;}
#cssplayGallery .cover {width:482px; height:100px; background:url(trans.gif); position:absolute; left:0; top:0; z-index:30;}
#cssplayGallery a {display:block; width:482px; height:302px; position:absolute; outline:0; background:#fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#cssplayGallery a.p1 {top:100px; z-index:10;}
#cssplayGallery a.p2 {top:80px; z-index:9;}
#cssplayGallery a.p3 {top:64px; z-index:8;}
#cssplayGallery a.p4 {top:51px; z-index:7;}
#cssplayGallery a.p5 {top:41px; z-index:6;}
#cssplayGallery a.p6 {top:33px; z-index:5;}
#cssplayGallery a.p7 {top:26px; z-index:4;}
#cssplayGallery a.p8 {top:21px; z-index:3;}
#cssplayGallery a.p9 {top:17px; z-index:2;}

#cssplayGallery a.p1 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p5 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p6 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p7 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p8 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=10);}
#cssplayGallery a.p9 img {width:80px; padding:0 200px; opacity:0.1; filter: alpha(opacity=10);}

#cssplayGallery a img {display:block; border:1px solid #fff;
-webkit-transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
/* IE browsers */
#cssplayGallery a:active {opacity:0;}

#cssplayGallery a.p1:active ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:active ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:active ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:active ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:active ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:active ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:active ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:active ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:active ~ a.p2 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p1:active ~ a.p3 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p1:active ~ a.p4 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p1:active ~ a.p5 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p1:active ~ a.p6 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p1:active ~ a.p7 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p1:active ~ a.p8 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}
#cssplayGallery a.p1:active ~ a.p9 img {width:100px; padding:0 190px; filter: alpha(opacity=15);}

#cssplayGallery a.p2:active ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:active ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:active ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:active ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:active ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:active ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:active ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:active ~ a.p3 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p2:active ~ a.p4 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p2:active ~ a.p5 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p2:active ~ a.p6 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p2:active ~ a.p7 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p2:active ~ a.p8 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}
#cssplayGallery a.p2:active ~ a.p9 img {width:126px; padding:0 177px; filter: alpha(opacity=20);}

#cssplayGallery a.p3:active ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:active ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:active ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:active ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:active ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:active ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:active ~ a.p4 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p3:active ~ a.p5 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p3:active ~ a.p6 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p3:active ~ a.p7 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p3:active ~ a.p8 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}
#cssplayGallery a.p3:active ~ a.p9 img {width:156px; padding:0 162px; filter: alpha(opacity=25);}

#cssplayGallery a.p4:active ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:active ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:active ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:active ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:active ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:active ~ a.p5 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p4:active ~ a.p6 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p4:active ~ a.p7 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p4:active ~ a.p8 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}
#cssplayGallery a.p4:active ~ a.p9 img {width:196px; padding:0 142px; filter: alpha(opacity=30);}

#cssplayGallery a.p5:active ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:active ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:active ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:active ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:active ~ a.p6 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p5:active ~ a.p7 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p5:active ~ a.p8 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}
#cssplayGallery a.p5:active ~ a.p9 img {width:246px; padding:0 117px; filter: alpha(opacity=35);}

#cssplayGallery a.p6:active ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:active ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:active ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:active ~ a.p7 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p6:active ~ a.p8 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}
#cssplayGallery a.p6:active ~ a.p9 img {width:308px; padding:0 86px; filter: alpha(opacity=40);}

#cssplayGallery a.p7:active ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:active ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:active ~ a.p8 img {width:480px; padding:0; filter: alpha(opacity=100);}
#cssplayGallery a.p7:active ~ a.p9 img {width:384px; padding:0 48px; filter: alpha(opacity=45);}

#cssplayGallery a.p8:active ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:active ~ a.p9 img {width:480px; padding:0; filter: alpha(opacity=100);}

#cssplayGallery a.p8:active {top:200px; z-index:13;}


/* non-IE browsers */

#cssplayGallery a:focus {opacity:0;}

#cssplayGallery a.p1:focus ~ a.p2 {top:100px; z-index:20;}
#cssplayGallery a.p1:focus ~ a.p3 {top:80px; z-index:19;}
#cssplayGallery a.p1:focus ~ a.p4 {top:64px; z-index:18;}
#cssplayGallery a.p1:focus ~ a.p5 {top:51px; z-index:17;}
#cssplayGallery a.p1:focus ~ a.p6 {top:41px; z-index:16;}
#cssplayGallery a.p1:focus ~ a.p7 {top:33px; z-index:15;}
#cssplayGallery a.p1:focus ~ a.p8 {top:26px; z-index:14;}
#cssplayGallery a.p1:focus ~ a.p9 {top:21px; z-index:13;}
#cssplayGallery a.p1:focus ~ a.p2 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p1:focus ~ a.p3 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p1:focus ~ a.p4 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p1:focus ~ a.p5 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p1:focus ~ a.p6 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p1:focus ~ a.p7 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p1:focus ~ a.p8 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}
#cssplayGallery a.p1:focus ~ a.p9 img {width:100px; padding:0 190px; opacity:0.15; filter: alpha(opacity=15);}

#cssplayGallery a.p2:focus ~ a.p3 {top:100px; z-index:20;}
#cssplayGallery a.p2:focus ~ a.p4 {top:80px; z-index:19;}
#cssplayGallery a.p2:focus ~ a.p5 {top:64px; z-index:18;}
#cssplayGallery a.p2:focus ~ a.p6 {top:51px; z-index:17;}
#cssplayGallery a.p2:focus ~ a.p7 {top:41px; z-index:16;}
#cssplayGallery a.p2:focus ~ a.p8 {top:33px; z-index:15;}
#cssplayGallery a.p2:focus ~ a.p9 {top:26px; z-index:14;}
#cssplayGallery a.p2:focus ~ a.p3 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p2:focus ~ a.p4 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p2:focus ~ a.p5 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p2:focus ~ a.p6 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p2:focus ~ a.p7 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p2:focus ~ a.p8 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}
#cssplayGallery a.p2:focus ~ a.p9 img {width:126px; padding:0 177px; opacity:0.2; filter: alpha(opacity=20);}

#cssplayGallery a.p3:focus ~ a.p4 {top:100px; z-index:20;}
#cssplayGallery a.p3:focus ~ a.p5 {top:80px; z-index:19;}
#cssplayGallery a.p3:focus ~ a.p6 {top:64px; z-index:18;}
#cssplayGallery a.p3:focus ~ a.p7 {top:51px; z-index:17;}
#cssplayGallery a.p3:focus ~ a.p8 {top:41px; z-index:16;}
#cssplayGallery a.p3:focus ~ a.p9 {top:33px; z-index:15;}
#cssplayGallery a.p3:focus ~ a.p4 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p3:focus ~ a.p5 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p3:focus ~ a.p6 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p3:focus ~ a.p7 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p3:focus ~ a.p8 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}
#cssplayGallery a.p3:focus ~ a.p9 img {width:156px; padding:0 162px; opacity:0.25; filter: alpha(opacity=25);}

#cssplayGallery a.p4:focus ~ a.p5 {top:100px; z-index:20;}
#cssplayGallery a.p4:focus ~ a.p6 {top:80px; z-index:19;}
#cssplayGallery a.p4:focus ~ a.p7 {top:64px; z-index:18;}
#cssplayGallery a.p4:focus ~ a.p8 {top:51px; z-index:17;}
#cssplayGallery a.p4:focus ~ a.p9 {top:41px; z-index:16;}
#cssplayGallery a.p4:focus ~ a.p5 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p4:focus ~ a.p6 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p4:focus ~ a.p7 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p4:focus ~ a.p8 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}
#cssplayGallery a.p4:focus ~ a.p9 img {width:196px; padding:0 142px; opacity:0.3; filter: alpha(opacity=30);}

#cssplayGallery a.p5:focus ~ a.p6 {top:100px; z-index:20;}
#cssplayGallery a.p5:focus ~ a.p7 {top:80px; z-index:19;}
#cssplayGallery a.p5:focus ~ a.p8 {top:64px; z-index:18;}
#cssplayGallery a.p5:focus ~ a.p9 {top:51px; z-index:17;}
#cssplayGallery a.p5:focus ~ a.p6 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p5:focus ~ a.p7 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p5:focus ~ a.p8 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}
#cssplayGallery a.p5:focus ~ a.p9 img {width:246px; padding:0 117px; opacity:0.35; filter: alpha(opacity=35);}

#cssplayGallery a.p6:focus ~ a.p7 {top:100px; z-index:20;}
#cssplayGallery a.p6:focus ~ a.p8 {top:80px; z-index:19;}
#cssplayGallery a.p6:focus ~ a.p9 {top:64px; z-index:18;}
#cssplayGallery a.p6:focus ~ a.p7 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p6:focus ~ a.p8 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}
#cssplayGallery a.p6:focus ~ a.p9 img {width:308px; padding:0 86px; opacity:0.4; filter: alpha(opacity=40);}

#cssplayGallery a.p7:focus ~ a.p8 {top:100px; z-index:20;}
#cssplayGallery a.p7:focus ~ a.p9 {top:80px; z-index:19;}
#cssplayGallery a.p7:focus ~ a.p8 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}
#cssplayGallery a.p7:focus ~ a.p9 img {width:384px; padding:0 48px; opacity:0.45; filter: alpha(opacity=45);}

#cssplayGallery a.p8:focus ~ a.p9 {top:100px; z-index:20;}
#cssplayGallery a.p8:focus ~ a.p9 img {width:480px; padding:0; opacity:1; filter: alpha(opacity=100);}

#cssplayGallery a.p8:focus {top:200px; z-index:13;}
</style>

<div id="cssplayGallery">
<div class="cover">
</div>
<a class="p1" href="#url" tabindex="1"><img alt="" src="" /></a>
<a class="p2" href="#url" tabindex="2"><img alt="" src="" /></a>
<a class="p3" href="#url" tabindex="3"><img alt="" src="" /></a>
<a class="p4" href="#url" tabindex="4"><img alt="" src="" /></a>
<a class="p5" href="#url" tabindex="5"><img alt="" src="" /></a>
<a class="p6" href="#url" tabindex="6"><img alt="" src="" /></a>
<a class="p7" href="#url" tabindex="7"><img alt="" src="" /></a>
<a class="p8" href="#url" tabindex="8"><img alt="" src="" /></a>
<a class="p9" href="#url" tabindex="9"><img alt="" src="" /></a></div>
в f t
наверх ↑

4 комментария:

Анонимный
=_=) (Благодарю)
NMitra
Пожалуйста :)
Анонимный
Вы единственная и лучшая ! БЛОГ ТАКОГО РАСКЛАДА ИСКАЛ ОООЧЕНЬ ДОЛГО ! СПАСИБО ВАМ ЗА ТО ЧТО ВЫ ЕСТЬ !!!
NMitra
Спасибо большое, очень приятно слышать! ))