меню

Помимо обычных селекторов тегов, потомков, классов и id селекторов, CSS располагает псевдо-классами, селекторы которых позволяют оформить HTML теги на основе их позиции в документе. В этой статье рассмотрим 5 полезных CSS селекторов, стоящих внимания при оформлении веб-страниц и приложений.

:first-child и :last-child

Селекторы :first-child и :last-child структурные псевдо-классы, позволяют выбрать первый или последний элемент от родительского.

Например, если необходимо выбрать только первый элемент неупорядоченного списка, нужно использовать :first-child.


li:first-child {
border: 1px solid red;
font-weight: bold;
}   

Аналогично, :last-child, выберет последний элемент.


li:last-child {
border: 1px solid green;
}   

:nth-child

:nth-child, особо полезный структурный псевдо-класс, он позволяет выбирать элементы на основании их позиций в рамках родительского элемента.

Синтаксис :nth-child, довольно прост, в круглых скобках заявляется какие элементы выбрать.

Одним из аргументов являются even или odd, выбирающие только четные или нечетные элементы. Следующее правило, выберет только четные элементы списка.


li:nth-child(even) {
color: white;
background-color: black;
}

В следующем случае можно использовать целое число.


li:nth-child(3) {
background-color: tomato;
}    

Что делает этот псевдо-класс реально мощным, так это пользовательская комбинация, для "особого" выбора элементов. Базовый синтаксис таков:


:nth-child(an+b)   

Значения a и b всегда представляются числом, в значение n не меняется (остается литералом). Значение b, это значение отступа, который определяет, какой элемент выбрать первым. Значение a, определяет цикл выбираемых элементов, после выбора первого элемента. Значение n, неизменно, это эдакий литерал, по сути с каждым "оборотом цикла" увеличивающийся на 1, начиная с 0. итак:


li:nth-child(2n+3)

Что происходит, 3 элемент списка будет выбран первый (значение b), а затем до конца списка выбирается каждый второй (a).

Выражение, приведенное ниже, будет выбирать только первые 5 элементов списка, что достигается отрицательным значением n (если его сделать положительным, то наоборот первые 5 будут пропускаться и выбираться все остальные).


li:nth-child(-n+5)   

Иногда полезно использовать вариацию псевдо-класса, где b, считается не от начала а от конца ( работает она аналогично-инвертировано ), например выражение ниже, начнет выбирать с конца списка, отсчитав 10 элементов, и выделит каждый второй элемент вплоть до начала списка:


li:nth-last-child(2n+10) {  
background: yellow;
color: red;
}   

:nth-of-type

Аналогично :nth-child, выбирает элементы так же по выражению (an+b). Отличие его в том, что оно не зависит от позиции элемента в теле документа. Сейчас объясню более понятно: например


<div>1 div</div>
<span>2 span</span>
<div>3 div</div>
<span>4 span</span>
<div>5 div</div>
<span>6 span</span>
<div>7 div</div>
<span>8 span</span>
<div>9 div</div>
<div>10 div</div>    

Если использовать div:nth-child(2n), то мы выделим блок только с номером 10, а если div:nth-of-type(2n), то будет выбираться каждый второй блок, независимо есть ли между ними span или нет. Грубо говоря :nth-child оперирует с элементами которые идут друг за другом, а :nth-of-type игнорирует все преграды и выбирает подряд. Какой псевдо-класс использовать, дело вкуса, но я склоняюсь к nth-of-type.

И соответственно "обратный" псевдо-класс :nth-last-of-type

:target

Весьма интересный псевдо-класс, который основывается на URL текущей страницы и выбирает элемент по соответствующему id. Например:


<a href="#intro">Введение</a> <a href="#conclusion">Заключение</a>
...
<div id="intro">Введение</div>
<div id="conclusion">Заключение</div>   


:target {
border: 5px solid blue;
}   

При нажатии на ссылку "введение", синим цветом будет выделяться блок с id="intro". По сути выделяется тот элемент, чей id = URL после решетки ( #intro ).

::before и ::after псевдо-элементы

Псевдо-элементы, дают доступ к "виртуальным" элементам документа, которые не указаны в HTML-коде. С помощью псевдо-элементов ::before и ::after, можно вставить "виртуальный" контент, который виден только пользователю браузера, до выбираемого элемента и после.

::before

Как называется, так и работает. Этот псевдо-элемент вставит контент вперед выбираемого элемента. Дабы это имело смысл, всегда используется свойство css content, - иначе смысл? В любом случае, это свойство должно, хотя бы, быть просто пустыми ковычками ( чтобы корректно работать ).


.pdf::before {
content: url(img/pdf.png);
margin-right: 10px;
}    

Тут к примеру вставляется картинка ко всем элементам с классом .pdf, и к ней же применяются свойства css.

::after

Псевдо-элемент ::after, аналогично предыдущему вставит контент после выбираемого элемента.

 

Поддержка браузерами

Рассмотренные селекторы, отлично поддерживаются большинством браузером. Если не брать в счет ie8 <, хотя даже этот уебок ie8 поддерживает ::before и ::after, удивительно!) С другой стороны, для нашего друга всегда есть JQuery, где можно недостающие селекторы оформить в js-коде.

 


Возможно, вам будет интересно

Icon Fonts или SVG?

Графические иконки - главный элемент буквально всякого сайта или приложения. Как правило, весят они немного, однако вопрос выбора формата все равно остается актуальным. В случае если не брать в расчет нормальные форматы изображений, у разработчиков есть два основных варианта: использовать SVG либо иконочные шрифты (icon fonts). Собственно что из них лучше? Разберемся ниже.

17 CSS/HTML эффектов с кроссбраузерными решениями

Когда вы хотите добиться какого-либо эффекта, то не беретесь каждый раз изобретать велосипед, всегда проще взять готовый кусок кода. И если у вас уже есть такой фрагмент кода, который реализует нужный вам функционал (и при этом вы понимаете, как он работает), то вы просто применяете его.

Как в CSS связывать объекты?

Что такое связывание объектов? Это создание события, которое отражается на другом объекте на веб-странице. При этом событие может отражаться также и на первом объекте. Для создания достаточно использовать только CSS, так что это интересный и не ресурсоёмкий способ.

Специальные символы HTML

Специальные символы HTML. Для отображения символов, которых нет на клавиатуре, применяются специальные знаки, начинающиеся с амперсанда (&) и заканчивающиеся точкой с запятой (;)

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту