От автора: в CSS есть селекторы для поиска элементов на основе их положения в дереве документа. Их называют индексными псевдоклассами, потому что они смотрят на положение элемента, а не на его тип, атрибуты или ID. Всего их пять.
:first-child и :last-child
По названию вы могли догадаться, что псевдоклассы :first-child и :last-child выбирают первый и последний дочерний элемент в узле (элементе). Как и с другими псевдоклассами, :first-child и :last-child оказывают минимальное стороннее воздействие при использовании простых селекторов.
Рассмотрим HTML и CSS ниже:
На скриншоте ниже показан результат.
Заголовок h2 и первый li окрасились в розовый, так как :first-child не привязан к конкретным элементам. Тег h2 – первый ребенок тега body, а li – первый дочерний элемент ul. Но почему оставшиеся элементы li зеленые? Потому что :last-child тоже не привязан к конкретному элементу, а ul является последним дочерним элементом в теге body. По сути, в стилях выше мы прописали *:first-child и *:last-child.
Если добавить к :first-child и :last-child простой селектор, они станут конкретнее. Давайте ограничим нашу выборку только элементами списка. Замените :first-child на li:first-child и :last-child на li:last-child. На скриншоте ниже показан результат.
:nth-child() и :nth-last-child()
Уметь выбирать первый и последний дочерние элементы в документе неплохо. А что если нужно выбрать четные или нечетные элементы? Может, нам нужно выбрать шестой элемент в дереве или применить стили к каждому третьему дочернему элементу. Здесь нам помогут псевдоклассы :nth-child() и :nth-last-child().
Как и :not, :nth-child() и :nth-last-child() также являются функциональными псевдоклассами. Они принимают один аргумент, который должен быть:
Последний аргумент немного сложнее остальных. Разберем его чуть позже.
Чем отличаются :nth-child() и :nth-last-child()? Они отличаются точкой отсчета: :nth-child() считает вперед, а :nth-last-child() – назад. CSS индексы используют натуральные числа и начинаются с 1, а не с 0.
С помощью псевдоклассов :nth-child() и :nth-last-child() удобно создавать чередующиеся узоры. Полосатая таблица – идеальный пример использования. CSS ниже присваивает четным строкам в таблице светлый синевато-серый фон, результат можно посмотреть на скриншоте ниже:
Если переключиться с :nth-child на :nth-last-child, полосы инвертируются, так как отсчет начнется с низа. Смотрите скриншот ниже.
А хотите что-нибудь посложнее, с более сложными аргументами? Давайте создадим документ с 20 элементами, как показано ниже.
С помощью :nth-child() и :nth-last-child() можно выбрать один определенный элемент. Можно выбрать все дочерние элементы после заданной позиции, или можно выбрать элементы с кратностью со смещением. Давайте изменим фон шестого элемента:
Результат.
А если нужно выбрать каждый третий элемент? Тут нам поможет синтаксис Аn+В:
Еще раз, А – шаг. Это множитель для n, начинающийся с 1. То есть если А = 3, то 3n выберет третий, шестой и девятый элементы и т.д. Именно это можно наблюдать на скриншоте ниже.
Здесь уже все немного интереснее. С помощью :nth-child() и :nth-last-child() можно выбрать все элементы после заданной точки. Давайте выберем все элементы кроме первых семи:
Здесь шаг не задан. Как результат, n+8 выбирает все элементы n, начиная с восьмого. Смотрите скриншот ниже.
Замечание: отрицательное смещение
Отрицательные значения и диапазоны также валидны. Запись типа :nth-child(-n+8) инвертирует выборку и выбирает первые восемь элементов.
С помощью смещения и шага можно выбрать каждый третий элемент, начиная с пятого:
Результат.
only-child
Псевдокласс only-child выбирает элемент только в том случае, если он единственный дочерний элемент. Ниже представлено два маркированных списка. В первом один элемент, во втором три:
Селектор li:only-child{color: #9c27b0;} выберет <li>Apple</li>, так как это единственный дочерний элемент первого списка. Элементы второго списка в выборку не попадают, так как там три смежных элемента. Результат показан ниже.
:empty
С помощью псевдокласса :empty можно выбрать элементы, у которых нет дочерних элементов. Псевдокласс :empty говорит сам за себя (empty от англ. «пустой»). Чтобы попасть в выборку :empty, элемент должен быть абсолютно пустым, не должно быть даже пробелов. То есть <p></p> попадает в выборку, а <p> </p> нет.
Иногда WYSIWYG редакторы вставляют пустые теги p в ваш контент. С помощью :empty и :not можно делать так, чтобы к этим элементам не применялись стили. Например, p:not(:empty).
Выбор элементов определенного типа по их индексу
Описанные в предыдущем разделе псевдоклассы выбирают элементы, если те занимают определенную позицию в дереве документа. Например, p:nth-last-child(2) выберет все теги p перед последним внутри родительского блока.
В этом разделе мы поговорим о типизированных индексных псевдоклассах. Эти псевдоклассы также выбирают элементы по значению индекса, но выбор ограничен определенным типом. Например, нужно выбрать пятый тег p или четные h2.
Существует пять таких псевдоклассов, имена которых полностью противоположны их нетипизированным коллегам:
Грань между ними и дочерними индексными псевдоклассами тонка. Запись p:nth-child(5) находит только пятый тег p, а запись p:nth-of-type(5) находит все теги p и вычленяет среди них пятый.
Давайте создадим другой документ. В нем также 20 элементов, только некоторые — это теги p, а другие – div. Теги p со скругленными углами, смотрите скриншот ниже.
Использование first-of-type, last-of-type и only-type
С помощью :first-of-type можно выбрать первый элемент, подпадающий под селектор. Давайте изменим цвет первого p на зеленый:
Такая запись выберет все теги p, являющиеся первым дочерним элементом в родительском блоке. Смотрите скриншот ниже.
Псевдокласс :last-of-type работает схожим образом. Выбирается последний элемент в родительском блоке. Посмотреть результат можно ниже. А only-of-type выберет элемент только, если он является единственным дочерним элементом такого типа внутри родительского блока. Показано ниже.
Разберем еще один пример использования :first-of-type, на этот раз с псевдоэлементом. Помните псевдоэлемент ::first-letter, о котором мы рассказывали ранее в этой главе? Как вы помните, с его помощью создавалась первая заглавная буква для всех элементов, к которым он применялся. А что если мы ограничим его действие только на первый параграф:
На скриншоте ниже показано, что теперь только у первого параграфа заглавная буква, несмотря на наличие заголовка перед параграфом.
webformyself.com
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>nth-last-child</title> <st.
lt;/head> <body> <table> <tr> <td> </td><td>2134</td><td>2135</td> <td>2136</td><td>2137</td><td>2138</td> </tr> <tr> <td>Нефть</td><td>16</td><td>34</td> <td>62</td><td>74</td><td>57</td> </tr> <tr> <td>Золото</td><td>4</td><td>69</td> <td>72</td><td>56</td><td>47</td> </tr> <tr> <td>Дерево</td><td>7</td><td>73</td> <td>79</td><td>34</td><td>86</td> </tr> <tr> <td>Камни</td><td>23</td><td>34</td> <td>88</td><td>53</td><td>103</td> </tr> </table> </body> </html>В данном примере псевдокласс :nth-last-child используется для выделения цветом всех нечётных колонок, начиная с последней (рис. 1).
Рис. 1. Применение псевдокласса :nth-last-child к колонкам таблицы
webref.ru
Каждый раз, когда мы используем CSS, мы используем селекторы. Несмотря на это, селекторы являются одной из наиболее пренебрегаемой частью спецификации.
Мы говорим о больших изменениях в CSS, но часто забываем об основах. Правильное использование селекторов делает ежедневную верстку проще и элегантнее. Сегодня я расскажу о 10 селекторах, которые часто ускользают из памяти, но являются эффективными и очень полезными.
*
Селектор * легче всего запомнить, но этого часто недостаточно. Он применяет стиль ко всем элементам на странице, и это отлично подходит для создания сбросов и выбора каких-то свойств по-умолчанию, например, семейства или размера шрифта.
* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; } A + B
Этот селектор называется соседним, он выбирает тэг B, следующий сразу же после тэга A. (Элементы должны следовать непосредственно друг за другом). Если вы хотите выбрать первый контейнер после заголовка, пишите:
header + div { margin-top: 50px; }
A > B
Этот селектор выберет только дочерний элемент, в отличие от A B, выбирающего всех потомков. Этот селектор рекомендуется, если вы работаете с прямым потомком родительского элемента. К примеру, если вы хотите выбрать элементы верхнего уровня в неупорядоченном списке, это будет выглядеть примерно так:
<ul> <li>List Item With ul <ul> <li>Sub list item</li> <li>Sub list item</li> <li>Sub list item</li> </ul> </li> <li>List Item</li> <li>List Item</li> </ul> Вы должны использовать дочерний селектор, потому что обычный селектор А В выберет также элементы вложенного неупорядоченного списка.
ul > li { background: black; color: white; } A[href*=«example»]
Этот селектор хорош, если вам нужно применить особый стиль к ссылкам, в атрибуте href которых есть значение, указанное в кавычках. Например, чтобы все ссылки, ведущие на Facebook, были синего цвета, используем:
a[href*="facebook"] { color: blue; } Также есть версия без "*", позволяющая использовать точную ссылку.
A:not(B)
Этот селектор полезен, если нужно выбрать группу элементов, не соответствующих указанным в В. Если вы хотите выбрать все контейнеры кроме футера, используйте:
div:not(.footer) { margin-bottom: 40px; }
A:first-child / A:last-child
Эти селекторы помогают выбрать первого и последнего потомка, соответственно, родительского элемента. Они могут отлично убрать правые отступы или границы, когда дело доходит до элементов списка. Чтобы убрать границу у первого пункта меню и отступы у последнего, необходимо:
ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; } A:nth-child(n)
Этот селектор — простой способ выбрать потомок элемента по его порядку. К примеру, если вы хотите выбрать третий пункт внутри неупорядоченного списка, нужно:
ul li:nth-child(3) { background: #ccc; } Можно использовать nth-child для выбора каждого n-ого элемента. Если мы используем 3n, то будет выбирать 3-ий, 6-ой, 9-ый пункт меню и т.д.
A:nth-last-child(n)
Этот селектор работает как предыдущий, но начинает считать с последнего элемента, а не первого. Так что, если вы используете nth-last-child(2), стиль применится к предпоследнему элементу.
ul li:nth-last-child(2) { background: #ccc; } A:nth-of-type(n)
Этот селектор делает именно то, о чем вы подумали; выбирает элемент по типу и номеру, который вы указали. Для выбора третьего параграфа в контейнере можно использовать:
div p:nth-of-type(3) { font-style: italic; } A:visited
Никогда не замечали, что когда вы что-то ищете в Google, ссылки, по которым вы переходили, меняют цвет? Так работает visited. Это прекрасная помощь пользователям, о которой частенько забывают, но, по моему опыту, это очень удобно.
a:visited { color: blue; } Заключение
По моему опыту, использование всех этих селекторов при разработке помогает спасти уйму времени, а также избежать создания множества идентификаторов при разметке. И это только часть селекторов, их намного больше, удобных, но забытых.
savepearlharbor.com
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> </head> <body> <input type="checkbox"> <input type="checkbox" checked> <input type="text" id="message"> <h3 id="widget-title">Сообщения:</h3> <ul id="messages"> <li id="message-1">Сообщение 1</li> <li id="message-2">Сообщение 2</li> <li id="message-3" data-action="delete">Сообщение 3</li> <li id="message-4" data-action="edit do-not-delete">Сообщение 4</li> <li id="message-5" data-action="edit delete">Сообщение 5</li> <li><a href="#">...</a></li> </ul> <a href="http://site.com/list.zip">Ссылка на архив</a> <a href="http://site.com/list.pdf">..И на PDF</a> <script> // тестовая функция для селекторов // проверяет, чтобы элементов по селектору selector было ровно count function test(selector, count) { var elems = document.querySelectorAll(selector); var ok = (elems.length == count); if (!ok) alert(selector + ": " + elems.length + " != " + count); } // ------------- селекторы -------------- // Выбрать input типа checkbox test('input[type="checkbox"]', 2); // Выбрать input типа checkbox, НЕ отмеченный test('input[type="checkbox"]:not(:checked)', 1); // Найти все элементы с id=message или message-* test('[id|="message"]', 6); // Найти все элементы с id=message-* test('[id^="message-"]', 5); // Найти все ссылки с расширением href="...zip" test('a[href$=".zip"]', 1); // Найти все элементы с data-action, содержащим delete в списке (через пробел) test('[data-action~="delete"]', 2); // Найти все элементы, у которых ЕСТЬ атрибут data-action, // но он НЕ содержащит delete в списке (через пробел) test('[data-action]:not([data-action~="delete"])', 1); // Выбрать все чётные элементы списка #messages test('#messages li:nth-child(2n)', 3); // Выбрать один элемент сразу за заголовком h3#widget-title // на том же уровне вложенности test('h3#widget-title + *', 1); // Выбрать все ссылки, следующие за заголовком h3#widget-title // на том же уровне вложенности test('h3#widget-title ~ a', 2); // Выбрать ссылку внутри последнего элемента списка #messages test('#messages li:last-child a', 1); </script> </body> </html>learn.javascript.ru
CSS3 – замечательная вещь, но можно крайне легко заиграться с анимациями и трансформациями (многие из которых имеют атрибут vendor-specific) и забыть о механизмах и селекторах, которые также были внесены в спецификацию. Ряд мощных новых псевдо-селекторов (16 из них представлены в самой свежей спецификации от W3C) позволяют нам выбирать элементы на базе новых критериев.
Перед тем, как мы окунёмся в мир псевдо-классов CSS3, давайте бегло пройдёмся по прошлому ВЕБа, и немного вспомним некоторые непонятные селекторы.
Беглый обзор истории псевдо-классов
Когда в 1996 году была выпущена спецификация CSS1, туда было включено всего лишь несколько псевдо-селекторов, которые вы, наверное, использовали или используете каждый день. Например:
:link
:visited
:hover
:active
Каждое из этих положений может быть задано элементу (зачастую это элемент «a»), после чего идёт имя псевдо-класса. Сложно подумать, что эти псевдо-классы были внесены в HTML4 лишь годом позже, командой разработчиков из W3C (в декабре 1997 года).
Приход CSS2
Далее нашему вниманию представляется технология CSS2, чья спецификация выходит двумя годами позже, в 1998 году. Наряду с прикольными трюками вроде позиционирования, мы встречаем новые псевдо-классы: first-child и :lang().
:lang
Существует несколько методов указания языка документа. Если вы используете HTML5, то сейчас это будет выглядеть так: «html lang=»en»» сразу после указания типа документа (указание вашего локального языка, конечно же). Сейчас вы можете использовать :lang(en) для стилизации элементов на страницу, что крайне полезно, если вам нужен динамический язык на странице для отдельных элементов.
:first-child
Возможно, вы уже когда-то использовали :first-child в своих проектах. Зачастую этот псевдо-класс используется для добавления или удаления верхней границы первого элемента в списке. Странно, но этот псевдо-класс не был дополнен, например, псевдо-классом :last-child. Пришлось немного подождать, пока он появится уже в CSS3.
Для чего мы используем псевдо-классы?
Псевдо-классы кажутся настолько полезными потому, что они позволяют нам стилизовать содержимое динамически. В примере с ссылкой «a», представленном выше, мы имеем возможность стилизовать ссылки, и как они должны вести себя при взаимодействии с пользователями. Как видно, новые псевдо-классы позволяют нам динамически стилизовать контент, основываясь на его расположении в документе и на его состоянии.
16 новых псевдо-классов были представлено в качестве части CSS Proposed Recommendation от W3C, и они разделены на 4 группы: структурные псевдо-классы, псевдо-классы для указания положений элементов интерфейса, целевые псевдо-классы и псевдо-классы отрицания.
W3C – убежище CSS.
Теперь давайте ознакомимся с 16 новыми псевдо-селекторами, и посмотрим, как же мы можем их применить. Мы будем использовать те же условные знаки наименований классов, как это делали W3C. Т.е. Е – это элемент, N – число, а S – селектор.
Отрывок кода
Вы сможете видеть эффекты CSS посредством приложенных отрывков кода к некоторым из новых селекторов. Мы возьмём постоянную форму и сделаем её подходящей для iPhone используя новый псевдо-класс CSS3.
Заметьте, что мы также можем использовать ID и селекторы класса для этой формы, но у нас есть отличная возможность использовать наш новый псевдо-класс для вращения и продемонстрировать, каким образом вам следует их использовать. Вот HTML-код (который вы можете наблюдать в действии):
<form>
<hgroup>
<h1>Awesome Widgets</h1>
<h2>All the cool kids have got one :)</h2>
</hgroup>
<fieldset id="email">
<legend>Where do we send your receipt?</legend>
<label for="email">Email Address</label>
<input type="email" name="email" placeholder="Email Address" />
</fieldset>
<fieldset id="details">
<legend>Personal Details</legend>
<select name="title" id="field_title">
<option value="" selected="selected">Title</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
</select>
<label for="firstname">First Name</label>
<input name="firstname" placeholder="First Name" />
<label for="initial">Initial</label>
<input name="initial" placeholder="Initial" size="3" />
<label for="surname">Surname</label>
<input name="surname" placeholder="Surname" />
</fieldset>
<fieldset id="payment">
<legend>Payment Details</legend>
<label for="cardname">Name on card</label>
<input name="cardname" placeholder="Name on card" />
<label for"cardnumber">Card number</label>
<input name="cardnumber" placeholder="Card number" />
<select name="cardType" id="field_cardType">
<option value="" selected="selected">Select Card Type</option>
<option value="1">Visa</option>
<option value="2">American Express</option>
<option value="3">MasterCard</option>
</select>
<label for="cardExpiryMonth">Expiry Date</label>
<select id="field_cardExpiryMonth" name="cardExpiryMonth">
<option selected="selected" value="mm">MM</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select> /
<select id="field_cardExpiryYear" name="cardExpiryYear">
<option value="yyyy">YYYY</option>
<option value="2011">11</option>
<option value="2012">12</option>
<option value="2013">13</option>
<option value="2014">14</option>
<option value="2015">15</option>
<option value="2016">16</option>
<option value="2017">17</option>
<option value="2018">18</option>
<option value="2019">19</option>
</select>
<label for"securitycode">Security code</label>
<input name="securitycode" type="number" placeholder="Security code" size="3" />
<p>Would you like Insurance?</p>
<input type="radio" name="Insurance" id="insuranceYes" />
<label for="insuranceYes">Yes Please!</label>
<input type="radio" name="Insurance" id="insuranceNo" />
<label for="insuranceNo">No thanks</label>
</fieldset>
<fieldset id="submit">
<button type="submit" name="Submit" disabled>Here I come!</button>
</fieldset>
</form>
Наша форма, до и после.
1. Структурные псевдо-классы
Судя по материалам W3C, структурные псевдо-классы делают следующее:
«…позволяют делать выбор, основываясь на дополнительной информации, которая содержится в древе документа, но не могут быть представлены посредством простых селекторов или комбинаторов».
Это означает, что мы имеем селекторы, которым был задан параметр динамического выбора содержимого, основываясь на его расположении в документе. Итак, давайте начнём с самого начала документа, с :root.
Селекторы 3-го уровня на сайте W3C.
E:root
Псевдо-класс :root выбирает корневой элемент на странице. 99 раз из 100 это будет элемент «html». Например:
:root { background-color: #fcfcfc; }Важно помнить, что вы можете стилизовать элемент «html», что будет более доступно к пониманию:
html { background-color: #fcfcfc; }Пример формы iPhone
Давайте перейдём к нашему примеру кода и зададим документу немного основного текста и стилизацию фона:
:root {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
background: url(…/images/background.png) no-repeat #282826; }E:nth-child(n)
Селектор :nth-child() может потребовать немного экспериментов для того, чтобы окончательно усвоить его. Самое простое внедрение заключается в использовании ключевиков: чётные или нечётные, которые окажутся очень полезными при отображении данных, содержащих колонки и ячейки. Например, мы можем воспользоваться следующим:
ul li:nth-child(odd) {
background-color: #666;
color: #fff; }Это выделит каждую вторую ячейку в неупорядоченном списке. Вероятно, этот метод покажется вам крайне удобным при использовании таблиц. Например:
table tr:nth-child(even) { … }Селектор :nth-child() может быть более гибким и определенным. Вы можете выбрать лишь третий элемент в списке, например, так:
li:nth-child(3) { … }Учтите, что n не начинается с нуля, как это должно быть. Первый элемент – это :nth-child(1), второй – :nth-child(2), и так далее.
Мы также можем применять простую арифметику для создания более впечатляющих примеров. Рассмотрите следующий пример:
li:nth-child(2n) { … }Когда бы мы ни использовали N таким образом, он отвечает за все положительные целые числа (пока в документе не закончатся элементы, из которых производится выбор!). В этом случае, выбор падёт на следующие пункты списка:
Ничего (2 × 0)
2-й элемент (2 × 1)
4-й элемент (2 × 2)
6-й элемент (2 × 3)
8-й элемент (2 × 4)
И так далее.
Это даёт нам то же, что и nth-child(even). Итак, давайте всё смешаем:
li:nth-child(5n) { … }Это даёт нам:
Ничего (5 × 0)
5-й элемент (5 × 1)
10-й элемент (5 × 2)
15-й элемент (5 × 3)
20-й элемент (5 × 4)
И так далее.
Возможно, это будет полезным при работе с длинными таблицами, а возможно и нет. Мы также можем добавить другие числа в это уравнение:
li:nth-child(4n + 1) { … }Это даёт нам:
1-й элемент ((4 × 0) + 1)
5-й элемент ((4 × 1) + 1)
9-й элемент ((4 × 2) + 1)
13-й элемент ((4 × 3) + 1)
17-й элемент ((4 × 4) + 1)
И так далее.
Здесь нам представляется отличный пример на сайте SitePoint. Если вы установите N в качестве отрицательного, у вас будет возможность выбрать первое число Х среди пунктов и так далее:
li:nth-child(-n + x) { … }Представим, что вы хотите выбрать первые 5 элементов в списке. Тогда нам нужен следующий код CSS:
li:nth-child(-n + 5) { … }Это даёт нам:
5-й элемент (-0 + 5)
4-й элемент (-1 + 5)
3-й элемент (-2 + 5)
2-й элемент (-3 + 5)
1-й элемент (-4 + 5)
Ничего (-5 + 5)
Если вы располагаете данные в порядке популярности, а затем хотите выделить, скажем, лучшие 10 пунктов, то это может быть полезным.
На сайте WebDesign & Such есть отличный пример выделения ячеек в зебровидной форме. Здесь также используется nth-child на практике.
Зебровидная подсветка ячеек с помощью CSS3.
Если вам не требуется оформление каких-либо таблиц, то вы можете воспользоваться примером с Webvisionary Awards, который был выполнен с помощью :nth-child для стилизации отдельных разделов веб-сайта. Вот код CSS:
section > section:nth-child(even) {
background:rgba(255,255,255,.1)
url("../images/hr-damaged2.png") 0 bottom no-repeat;
}Эффект на странице незначителен, но он добавляет один слой деталей, которые могут быть утеряны в старых версиях браузеров.
Селекторы :nth-child в действии на сайте Webvisionary Awards.
Пример формы iPhone
Мы можем использовать :nth-child в некоторых местах нашего примера с формой iPhone, но давайте сосредоточимся на одном из них. Нам нужно спрятать надписи в первых трёх ячейках, и использовать вместо него текст-наполнитель. Вот код CSS:
form:nth-child(-n+3) label { display: none; }Здесь мы ищём первые три дочерних элемента от «form» (которые в нашем коде являются ячейками), а затем выделяем надпись. Затем мы прячем надписи посредством display:none;.
E:nth-last-child(n)
Кроме путаницы с псевдо-классом :nth-child(), ребята из W3C также озаботились созданием :nth-last-child(n). Он работает по похожей схеме с :nth-child(), только в обратном направлении, начиная от последнего пункта в выделении.
li:nth-last-child(1) { … }Код, предложенный выше, поможет вам выделать последний пункт списка, а следующий код поможет нам выделить предпоследний элемент:
li:nth-last-child(2) { … }Конечно же, вам нужно будет создавать другие правила, как, например, это:
li:nth-last-child(2n+1) { … }Но возможно вам захочется использовать следующий код для того, чтобы выделить 5 последних элементов в списке (основываясь на логических размышлениях, обсужденных выше):
li:nth-last-child(-n+5) { … }Если что-то идёт не так, то вы можете воспользоваться полезным тестером структурных псевдо-классов CSS3, разработанным Леа Вероу (Lea Verou).
Тестер структурных псевдо-классов CSS3.
Пример с формой iPhone
Мы можем использовать :nth-last-child в нашем примере для того, чтобы добавить закруглённые углы нашему полю для ввода номера кредитной карточки. Вот наш код CSS, который крайне специфичен, но может дать нам пищу для размышления о том, как можно связать псевдо-селекторы вместе:
fieldset:nth-last-child(2) input:nth-last-of-type(3) {
border-radius: 10px; }Для начала мы берём предпоследнюю ячейку и выбираем поле ввода, которые третье с конца (в этом случае, это будет поле ввода номера кредитки). Затем мы добавляет параметр border-radius.
:nth-of-type(n)
Теперь мы сделаем ещё более специфически, и применим стили только к отдельным типам элементов. Например, давайте сделаем так, чтобы в статье лишь первый абзац выделялся большим шрифтом. Вот код CSS:
article p:nth-of-type(1) { font-size: 1.5em; }Возможно, вам захочется выровнять одно изображение в статье по правой стороне, а другое – по левой. Мы можем использовать следующие ключевики для реализации:
article img:nth-of-type(odd) { float: right; }
article img:nth-of-type(even) { float: left; }С помощью :nth-child() и :nth-last-child() можно использовать математические уравнения:
article p:nth-of-type(2n+2) { … }
article p:nth-of-type(-n+1) { … }Важно помнить, что, если вам нужно применить данную специфику относительно таргетирования элементов, то нужно использовать описательные имена классов, что может значительно упростить процесс разработки.
Саймон Фостер (Simon Foster) разработал красивую инфографику о коллекции записей 45 RPM, и он использовал :nth-of-type для стилизации некоторых данных. Вот отрывок из кода CSS, который задаёт различные фоны каждому типу жанра:
ul#genre li:nth-of-type(1) {
width:32.9%;
background:url(images/orangenoise.jpg);
}
ul#genre li:nth-of-type(2) {
width:15.2%;
background:url(images/bluenoise.jpg);
}
ul#genre li:nth-of-type(3) {
width:13.1%;
background:url(images/greennoise.jpg);
}И вот так это всё выглядит на сайте:
Селекторы :nth-of-type на «For the Record».
Пример с формой iPhone
Предположим, что нам надо, чтобы у каждого второго поля ввода были закруглены углы с нижней стороны. Это можно реализовать посредством CSS:
input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }В нашем примере нам надо применить это лишь к одной ячейке с информацией для оплаты, так как ячейка с личными данными имеет три поля ввода. Также нужно быть внимательными, чтобы не выделить ничего из радио-кнопок. Вот итоговый код CSS:
#payment input:nth-of-type(even):not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom: 1px solid #999;
margin-bottom: 10px; }Мы объясним :not далее в статье.
:nth-last-of-type(n)
Будем надеяться, что сейчас вы увидите, что к чему: :nth-last-of-type() начинается в конце выделенного элемента и работает в обратном направлении.
Для того чтобы выбрать последний абзац в статье, вы можете использовать этот код:
article p:nth-last-of-type(1) { … }Возможно, вам захочется поменять этот селектор на :last-child, если ваши статьи не всегда заканчиваются абзацем.
:first-of-type и :last-of-type
Если :first-of-type и :last-of-type будут через чур специфичными для ваших задач, то вы можете использовать несколько более упрощённых селекторов. Например, вместо этого:
article p:nth-of-type(1) {
font-size: 1.5em; }вы можете использовать это:
article p:first-of-type {
font-size: 1.5em; }Как вы, возможно, ожидали, :last-of-type работает исключительно по такому же принципу, но с обратной стороны.
Пример с формой iPhone
Мы можем использовать :first-of-type, так и :last-of-type в нашем примере с формой iPhone, особенно при стилизации закругленных углов. Вот код CSS:
fieldset input:first-of-type:not([type=radio]) {
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
fieldset input:last-of-type:not([type=radio]) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }Первая строка CSS-кода добавляет закруглённые углы всем полям с классом :first-of-type в ячейке, которые не являются радио-кнопками. Вторая строка кода добавляет закругленные углы нижней части поля ввода в ячейке.
:only-of-type
Есть ещё один селектор, на который нужно взглянуть – :only-of-type(). Он полезен для выделения элементов, которые являются единственным представителем определенного типа в своём родительском элементе.
Например, рассмотрим разницу между этим CSS-селектором:
p {
font-size: 18px; }И этим:
p:only-of-type {
font-size: 18px; }Первый селектор будет стилизовать каждый элемент абзаца на странице. Второй селектор будет охватывать абзац, который единственный является абзацем в своём родительском элементе.
Это может пригодиться, когда вы стилизуете содержимое, которое было динамически извлечено из базы данных, а запрос предоставил лишь результат.
На сайте Devsnippet есть демо, в котором отдельные изображения стилизованы по-разному.
Демо от Devsnippet.
Пример с формой iPhone
В случае с нашим примером формы iPhone, мы можем быть уверенными в том, что все поля (которые являются дочерними элементами) ячейки будут иметь закруглённые углы, как сверху, так и снизу. CSS-код будет таким:
fieldset input:only-of-type {
border-radius: 10px; }:last-child
Немного странно, что :first-child являлся частью спецификации CSS2, но его вспомогательный селектор, :last-child, не появлялся вплоть до CSS3. Здесь нам не нужны уравнения или ключевики, селектор просто выделят послений элемент. Например:
li {
border-bottom: 1px solid #ccc; }
li:last-child {
border-bottom: none; }Очень удобный способ удаления нижних границ со списков. Вы часто можете наблюдать данный метод в виджетах WordPress.
Рэйчел Эндрю (Rachel Andrew) рассматривает применение селектора :last-child и других CSS псевдо-селекторов с 24 сторон в её статье «Cleaner Code With CSS3 Selectors». Рэйчел показывает нам, каким образом можно использовать этот селектор для создания отлично отформатированной галереи изображений без лишних классов.
:last-child в действии от Рэйчел Эндрю (Rachel Andrew).
:only-child
Если элемент является единственным дочерним в своём родительском элементе, то его можно выделять с помощью :only-child. В отличие от :only-of-type, здесь не важно, какого типа данный элемент. Например:
li:only-child { … }Мы можем использовать его для выделения элементов списка, которые являются единственными в своих родительских «ol» или «ul».
:empty
Наконец, среди структурных псевдо-классов также имеется :empty. Не удивительно то, что данный класс выделяет только те элементы, у которых нет дочерних элементов или нет содержимого. Опять, это может быть полезным при работе с динамическим содержимым, извлекаемым из базы данных.
#results:empty {
background-color: #fcc; }Вы можете использовать данный класс для привлечения внимания посетителей к секции с пустыми результатами поиска.
2. Таргетированные псевдо-классы
:target
Один из популярных псевдо-классов, так как он позволяет нам стилизовать элементы на странице, основываясь на URL. Если у URL есть идентификатор (который следует за #), то псевдо-класс :target стилизует элемент, который делит ID с идентификатором. Возьмём URL, который выглядит примерно так:
«http://www.example.com/css3-pseudo-selectors#summary»
Раздел с общими данными об ID может быть стилизован так:
:target {
background-color: #fcc; }Это отличный способ стилизации элементов на страницах, переход на которые был осуществлён со стороннего контента. Вы также можете использовать этот класс с внутренними анкорами для выделения содержимого, которое пользователи могли пропустить.
Вероятно, наиболее впечатляющий способ использования :target можно посмотреть на сайте Scrolling Site of Green от Кори Мвамба (Corey Mwamba). Кори использует некоторые креативные функции CSS3 и псевдо-класс :target для создания анимированной навигации с вкладками. Демо состоит из некоторых крайне креативных отрывков CSS3, что демонстрирует нам то, как псевдо-классы следует использовать в комбинации с другими CSS-селекторами.
Scrolling Site of Green от Кори Мвамба (Corey Mwamba).
Есть также интересный пример на сайте Web Designer Notebook. Здесь :target и анимации WebKit использованы для выделения блоков текста и целевых div’ах. Крис Койер (Chris Coyier) также создал систему вкладок «:target-based» на сайте CSS-Tricks.
Пример с формой iPhone
Как видно, на демо-странице была добавлена панель навигации в верхней части, которая сбрасывает вас на различные отделы формы. Мы можем выделить любой отдел, на который переходит пользователь, посредством следующего кода CSS:
:target {
background-color: rgba(255,255,255,0.3);
-webkit-border-radius:
10px;}3. Псевдо-классы положений элементов интерфейса
:enabled и :disabled
Вместе с :checked, :enabled и :disabled представляют собой 3 псевдо-класса для указания положения элементов интерфейса. Т.е., они позволяют вам стилизовать элементы (зачастую элементы форм), основываясь на их положении. Положение может быть выставлено пользователем (например, :checked) или разработчиком (например, :enabled и :disabled). Например, мы можем использовать следующий код:
input:enabled {
background-color: #dfd; }
input:disabled {
background-color: #fdd; }Это отличный способ взаимодействия с пользователями, указания того, что пользователи могут заполнить, а что не могут. Зачастую данную динамическую функцию можно встретить в дополнении с javascript.
Пример с формой iPhone
Для того чтобы продемонстрировать :disabled на практике, мы отключили кнопку подтверждения/отправки, приуроченную к форме, в коде HTML, и добавили эту строку кода CSS:
:disabled {
color: #600; }Текст кнопки красный!
:checked
Третий псевдо-класс – это :checked. Он взаимодействует с положением элементов типа чекбокса или радио-кнопки. Опять же, это очень полезный метод взаимодействия с пользователями. Например:
input[type=radio]:checked {
font-weight: bold; }Пример с формой iPhone
Мы можем использовать CSS для выделения текста возле каждой радио-кнопки, как только кнопка будет нажата:
input:checked + label {
text-shadow: 0 0 6px #fff; }Для начала, мы выделяем любой вводный элемент, который был отмечен, а затем мы ищем каждый последующий элемент «span», который содержит наш текст. Выделяем текст посредством простого параметра text-shadow, что создаёт взаимодействие с посетителями.
4. Псевдо-классы отрицания
:not
Ещё один излюбленный псевдо-класс, так как он выделяет весь контент, за исключением того элемента, который вы определите. Например:
:not(footer) { … }Это выделяет весь контент на странице, который не принадлежит подвалу (footer). Когда этот псевдо-класс используется с полями ввода, они позволяют нам немного схитрить:
input:not([type=submit]) { … }
input:not(disabled) { … }Первая строка выделяет каждое поле ввода, которое не относится к кнопке «Submit», что очень удобно для стилизации форм. Вторая строка выделяет все элементы ввода, которые не активированы, что также удобно для взаимодействия при заполнении форм.
Пример с формой iPhone
Вы уже видели селектор :not в действии. Он особенно силен при связке с другими CSS3-псевдо-классами. Давайте поближе взглянем на пример:
fieldset input:not([type=radio]) {
margin: 0;
width: 290px;
font-size: 18px;
border-radius: 0;
border-bottom: 0;
border-color: #999;
padding: 8px 10px;}Здесь мы выделяем все поля ввода внутри ячейки, которые не являются радио-кнопками. Это очень удобно, если нам надо стилизовать формы, так как вам часто нужно будет стилизовать поля ввода отлично от коробов выбора, радио-кнопок и кнопок подтверждения (Submit).
Посмотрите на финальный итог.
Хорошо забытое старое
Давайте вернёмся в начало нашей статьи, к скромному псевдо-классу a:link. Недавно в наш мир пришла технология HTML5, и принесла с собой радикальные изменения элемента «a», с помощью которого можно применить дополнительные эффекты к псевдо-селектору CSS3.
Теперь элемент «a» может быть обёрнут вокруг блочных элементов, превращая целые отделы вашей страницы в ссылки (а также те отделы, которые не содержат других интерактивных элементов). Несмотря на то, что javascript считается самым популярным методом создания кликабельных элементов «div», теперь у вас есть возможность оборачивать отделы в тэг «a», примерно так:
<a href="http://www.smashing-magazine.com">
<div id="advert">
<hgroup>
<h1>Jackson’s Widgets</h1>
<h2>The finest widgets in Kentucky</h2>
</hgroup>
<p>Buy Jackson’s Widgets today,
and be sure of a trouble-free life for you,
your widget and your machinery.
Trusted and sold since 1896.</p>
</div>
</a>Внедрение CSS псевдо-селекторов – это то, посредством чего вы можете стилизовать div’ы по принципу стилизации ссылки параметром a:hover или a:active. Например:
a:hover #advert {
background-color: #f7f7f7; }Что-либо, что будет мешать работе javascript и повышать важность и эффективность семантики кода, не может быть плохим!
Кросс-браузерная совместимость
Конечно же, вы начнёте возмущаться по поводу того, что IE8 не поддерживает какие-либо из предложенных селекторов, хотя последние версии браузеров Chrome, Opera, Safari и Firefox уже имеют такую поддержку. Прежде чем возмущаться, ознакомьтесь с продолжением статьи.
Internet Explorer 9
Конечно, если вы не жили в пещере до прошлой недели, как минимум, то вам должно быть известно, что Microsoft уже представили обществу свой новый браузер — Internet Explorer версии 9. Хорошие новости заключаются в том, что браузер действительно хорош. Хотя мы и не ожидаем, что прочитав эту статью, все сразу ринутся менять браузеры, просто следует помнить о том, что большинство пользователей мира используют стандартный браузер, идущий вместе с Windows. И, благодаря постоянным обновлениям от Microsoft, можно быть уверенным в том, что почти все пользователи ОС Windwos, уже используют 9-ю версию браузера. Это отличная новость для веб-дизайнеров, а также это хорошо для псевдо-селекторов. Но что же насчёт IE8 и предыдущих версий?
Internet Explorer 9 уже здесь!
javascript
Здесь наш старый друг javascript приходит на помощь. Нам очень нравится Selectivizr от Кейта Кларка (Keith Clark). Кейт совместил любимый скрипт и библиотеку javascript, которая добавляет функционал селектора CSS3-псевдо-классов в ранние версии IE. Будьте уверены в том, что некоторые библиотеки значительно лучше других. Если вы используете MooTools с Selectivizr, то вам будут доступны все псевдо-классы, но если вы полагаетесь на jQuery, то некоторые селекторы не будут работать вообще.
Selectivizr
Недавно Кейт выпустил jQuery-плагин, который расширяет возможности jQuery, и внедряет поддержку следующих псевдо-классов CSS3:
:first-of-type
:last-of-type
:only-of-type
:nth-of-type
:nth-last-of-type
Также стоит взглянуть на вездесущий скрипт ie7.js от Дина Эдвардса (Dean Edwards). Скрипт решает число проблем, возникающих при работе с IE, включая также проблемы с поддержкой CSS3 псевдо-селекторов.
Итак, стоит ли применять CSS3 псевдо-селекторы сегодня?
Нам кажется, что ответ на этот вопрос зависит от того, каким образом вы воспринимаете javascript. Конечно, нельзя отрицать, что все псевдо-селекторы могут быть заменены классами и id, но и также нельзя спорить с тем, что псевдо-селекторы намного удобнее, когда речь идёт о стилизации комплексных шаблонов. Если вы считаете, что псевдо-селекторы улучшают работу функционала и позволяют легче воспринимать CSS, то мы рекомендуем вам обязательно использовать селекторы.
Вы можете использовать два селектора, и опираться на имя класса, но это лишь заставит вас делать двойную работу. Это также означает, что вам не понадобятся псевдо-классы. Но если вы решили идти этим путём, то ваш код будет выглядеть примерно так:
li:nth-of-type(3),
li.third { … }Данный метод не настолько гибкий, как использование псевдо-классов, так как вам нужно постоянно обновлять HTML и CSS-код, когда содержимое страницы изменяется.
Если многие ваши пользователи не имеют поддержки javascript, то это будет очень неприятно. Многие веб-дизайнеры утверждают, что этот функционал (имеется в виду javascript) отличается от разметки (т.е. CSS), и поэтому вам не стоит полагаться на javascript для того, чтобы задействовать селекторы в IE версии 8 и ниже.
Хотя мы и согласны с этой теорией, на практике же мы верим, что предоставление 99% удобства пользования вашим веб-сайтом – это гораздо лучше и правильнее, чем учитывать требования оставшегося 1% (или насколько большой бы ни была база ваших посетителей с отключенной поддержкой JS).
Руководствуйтесь результатами анализа вашего веб-сайта, и будьте готовы принимать решения по совершенствованию навыков в роли веб-дизайнера и, что более важно, предоставляйте лучшие возможности большей части своих пользователей.
Итог
Сложно не расстраиваться ввиду полного отсутствия поддержки псевдо-классов в IE8. Возможно, данный метод принудительного внедрения поддержки повлияет на скорость загрузки и работы страниц, но, в то же время, нас немного удивляет, что пользователи IE ранних версией не могут вдоволь насладиться технологиями, если разработчики не будут прибегать к использованию специальных дополнений и хитростей. Хотя большинство современных браузеров легко поддерживают эту технологию.
Профессор Фарнсворс (Farnsworth) говорит, что есть и хорошие новости. Microsoft заявляют, что в новой, девятой, версии браузера Internet Explorer все описанные здесь псевдо-селекторы поддерживаются без проблем.
CSS3 псевдо-селекторы не будут занимать много места в ваших таблицах стилей. Они очень динамичны и очень специфичны, и без труда позволяют вам вносить финальные штрихи во внешний вид страницы и в её стиль. Возможно, вам захочется убрать нижнюю границу последнего элемента списка или дать возможность пользователям взаимодействовать с формами. Всё это возможно с помощью CSS3, и радует то, что эта технология всё быстрее и быстрее набирает обороты. Вскоре CSS3 станет неотъемлемой частью разработки каждого веб-сайта.
Если вы встречали какие-либо интересные и креативные способы применения селекторов, то, пожалуйста, опишите их в комментариях.
www.coolwebmasters.com
Использование псевдокласса CSS :nth-child для выбора единственного элемента
Задавая псевдоклассу :nth-child значение в виде числа, можно выбрать, к какому потомку из группы обратиться:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора всех элементов, кроме первых пяти
Если задать псевдоклассу :nth-child значение в виде n+ число, можно выбрать все элементы, начиная с элемента с этим порядковым номером:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только первых пяти элементов
Когда мы задаем псевдоклассу :nth-child значение в виде отрицательного n+ число, мы выбираем все элементы, находящиеся до элемента с этим порядковым номером:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора каждого третьего элемента
Псевдокласс :nth-child можно использовать, чтобы выбрать последовательность элементов, задавая, сколько элементов в последовательности и порядковый номер нужного элемента. Если задать значение 3n+1, будет выбран каждый третий элемент, начиная с первого:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только нечетных элементов
Можно задать псевдоклассу :nth-child значение odd (нечетный), чтобы выбрать все элементы с нечетными порядковыми номерами. Т.е., первый, третий, пятый, седьмой, девятый и т. д элементы. Это очень удобно, чтобы задавать цвета соседним рядам таблицы.
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-child для выбора только четных элементов
Этот пример показывает то же, что и прошлый, но на этот раз выбраны все элементы с четными порядковыми номерами. Т.е., второй, четвертый, шестой, восьмой, десятый и т. д. элементы:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :first-child для выбора первого элемента
Другой псевдокласс :first-child выберет первый элемент:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :last-child для выбора последнего элемента
Кроме псевдокласса :first-child есть псевдокласс :last-child, который выберет последний элемент из группы элементов:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Использование псевдокласса CSS :nth-last-child для выбора предпоследнего элемента
Еще можно использовать псевдокласс :nth-last-child, который совмещает в себе возможности псевдоклассов :last-child и :nth-child, чтобы начинать отсчет элементов с конца. Т.е., можно выбрать элемент, отсчитывая порядковые номера с конца группы, например, в группе из десяти элементов можно выбрать второй с конца элемент:
• Элемент 1
• Элемент 2
• Элемент 3
• Элемент 4
• Элемент 5
• Элемент 6
• Элемент 7
• Элемент 8
• Элемент 9
• Элемент 10
Ознакомьтесь с возможностями псевдокласса :nth-child с помощью «Конструктора nth-child».
www.dejurka.ru