Что значат эти знаки в 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 различных типов селекторов для атрибутов:
[att=value]
- атрибут должен иметь точное значение
<style type="text/css"> div[align="center"] { color: red; } </style> <div> содержимое </div> <div align="center"> содержимое </div>
[att~=value]
- атрибут должен иметь одно из значений, разделённые пробелами
<style type="text/css"> div[title~="CSS"] { color: red; } </style> <div title="Публикация о CSS"> содержимое </div> <div title="Селекторы в CSS"> содержимое </div>
[att|=value]
- для атрибута, после определённого значения которого следует дефис
<style type="text/css"> div[class|="css"] { color: red; } </style> <div class="selectors-css"> содержимое </div> <div class="css-selectors"> содержимое </div>
[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>
[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="Кот"/>
[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>
4 комментария: