CSS3 селекторы :first-child и :last-child
Пролог
Всем, кто более или менее имеет отношение к HTML- и XHTML-вёрстке, наверняка известно, что такое CSS-селекторы. В процессе выполнения некоторых задач я столкнулся, как и все, кто относит себя к указанной выше группе, с проблемами совместимости. Пенять на производителей браузеров в случае с селекторами :first-child и :last-child, очевидно, смысла нет, поскольку эти селекторы из стандарта третьей версии, который на данный момент имеет статус чернового варианта. Однако, мы всё же можем использовать их в повседневной деятельности, но потребуются кое-какие финты ушами.
Пример использования
Чаще всего я использую эти селекторы для отображения горизонтальных меню с разделителями с помощью списков, для того, чтобы полностью отделить описание структуры от стиля отображения:
Факты
- Единственный браузер, который более или менее нормально поддерживает оба этих селектора — Mozilla Firefox (однако и в этом прекрасном, мною горячо любимом и активно используемом, браузере есть некоторые бока);
- В браузерах Opera с 7 по 9 версий картина немного отличается от огненного лиса, :first-child реализован намного «прямее» чем :last-child (что, кстати, довольно странно, какая нахрен разница, казалось бы, селекторы-антонимы, механизм для выяснения является ли элемент первым потомком или последним практически один и тот же).
- Про всем известный и самый распространённый браузер я скромно промолчу, матом ругаться не хочется :-) (подробности об этом ниже).
Mozilla Firefox
Ошибки в реализации
- Неправильная интерпретация селекторов при условии наличия анонимного бокса непосредственно перед первым либо после последнего дочернего элемента.
- Если перед первым дочерним элементом либо после последнего элемента с помощью JavaScript был добавлен ещё один элемент, то браузер так же неправильно определяет первый и последний дочерние элементы.
Opera
Ошибки в реализации
- С селектором :first-child картина аналогичная браузеру Mozilla Firefox.
- Селектор же :last-child реализован через, ивините уж за просторечие, жопу. Чтобы добиться универсальности лучше всего использовать по максимуму возможности селектора :first-child.
Internet Explorer
Ошибки в реализации
- Реализация полностью отсуствует однако ошибки есть, но не в реализации, а в генетическом коде разработчиков этого чудовища ;-).
Универсальное горизонтальное меню с разделителями
Данный пример не претендует на полную универсальность, однако функциональность его была проверена в браузерах Mozilla Firefox 1.0.8, 1.5.0.8, 2.0, Opera 7.54, 8.52, 9.02, Internet Explorer 5.5, 6.
XHTML код (файл test.html)
В виду того, что CSS код для «нормальных» браузеров и для Internet Explorer радикально отличаются, а также по причине того, что CSS код для Internet Explorer не является валидным, рекомендуется использовать альтернативный CSS файл, подключаемый после CSS файла для «нормальных» браузеров с помощью conditional comments.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<title>Untitled Document</title>
<link
href="test.css"
rel="stylesheet"
type="text/css"
/>
<!--[if IE]>
<link
href="test-ie.css"
rel="stylesheet"
type="text/css"
/>
<![endif]-->
</head>
<body>
<ul class="nav">
<li>
<a href="javascript:void(0)">First item</a>
</li>
<li>
<a href="javascript:void(0)">Second item</a>
</li>
<li>
<a href="javascript:void(0)">Third item</a>
</li>
</ul>
</body>
</html>
CSS код для «нормальных» браузеров (файл test.css)
.nav
{
list-style:none;
display:block;
/*
свойство overflow имеет такое значение
для того, чтобы элемент UL вмещал в себя
поплавки и автоматически увеличивал свои
размеры, это не влияет на IE
*/
overflow:hidden;
border:1px solid blue;
width:500px;
margin:0;
padding:0;
}
.nav li
{
float:left;
padding:0 10px;
border-left:1px solid blue;
margin:10px 0;
}
.nav li:first-child
{
border:none;
}
CSS костыли для Internet Explorer (файл test-ie.css)
.nav
{
/*
этот финт ушами выполняет ту же функцию, что и
overflow: hidden; в CSS файле для нормальных
браузеров, по сути это эмуляция CSS селектора
:after, в конец списка добавляется невидимый
элемент высотой в один пиксель, благодаря чему
элемент UL вмещает в себя поплавки и обрамляет их
*/
behavior:expression
(
!this.after
?
this.after = this.innerHTML =
this.innerHTML + '<li class="cleaner">.</li>'
:
''
);
}
.nav li
{
/*
а вот этот финт, кстати, является как раз эмуляцией
селектора :first-child
*/
border-left:expression
(
(this == this.parentNode.firstChild)
?
('none')
:
('1px solid blue')
);
/*
уменьшаем нижний внешний отступ элементов списка
на один пиксель, поскольку мы добавили невидимый
элемент с такой высотой
*/
margin-bottom:9px;
}
/*
это стиль невидимого элемента, который
мы добавили к списку (см. выше)
*/
.nav li.cleaner
{
clear:left;
height:1px;
line-height:1px;
font-size:1px;
overflow:hidden;
visibility:hidden;
margin:0;
padding:0;
}
Эпилог
Вот, собственно, и всё, что я хотел рассказать по этому поводу. Надеюсь кому-то это поможет, ибо я, честно говоря, перед тем как всё это узнать потратил немало времени на изучение мегабайтов блогов и разнообразных доков, естественно, данная микростатья не освещает и одного процента того, что я узнал, копаясь в пучинах интернета. Отдельное спасибо хочется сказать Владимиру Токмакову и тебе, уважаемый читатель, если ты, конечно, дочитал до конца ;-).
Update (26.04.2007)
Как оказалось, я немного лажанулся, селектор :first-child присутствует во второй версии стандарта CSS, а :last-child только в третьей, и сразу становится понятно, почему первый реализован в опере прямее :-).
Комментарии (5)
Комментировать
работа лучшая работа в симферополе в киеве поработать; объективы для pentax. fujifilm Z5, объективы для nikon; купить серверное оборудование
Как все же хорошо, что мне не так часто приходится заниматься html-версткой…
Почему же? Это интересно… по крайней мере мне :) Вот несколько работ: http://q-zma.com/examples.tar.bz2 (около 900 Кб) из последних.
Ну, нагородил :)
Я все чтиво не осилила, но кажется есть способ проще: http://cssing.org.ua/2006/11/05/menu-separators/
Я на одном сайте так сделала — кода мало, основные браузеры довольны, я тоже :)
фишка в том, что это не единственное применение :)
это был просто пример, как можно использовать эти селекторы и как эмулировать их там, где их не понимають…
Спасибо, интересный способ :)
И сайтец-блог весьма симпатичный. Порадовала возможность изменять размер текста с помощью кнопочек-ссылочек сверху. Очень удобно для меня с разрешением 1280х1024 на 17″ ЖК и зрением минус хрен_знает_сколько :)
Удачи!