Главная → Программирование → by

Как использовать CSS3 псевдо-классы

CSS3 это замечательная вещь, но это легко быть одураченный от преобразований и анимации (многие из которых являются конкретного производителя) и забыть о гайки и болты селекторов, которые также были добавлены спецификации.Число новых мощных псевдо-селекторы (16 приведены в последняя W3C spec) позволяют выбирать элементы на основе целого ряда новых criteria.



Screenshot

Прежде чем мы рассмотрим эти новые CSS3 псевдо-классы, давайте кратко копаться в пыльных прошлого Web и наметить пути эти часто не понимают selectors.

Краткая история Псевдо-Classes

Когда CSS1 спецификация была завершена еще в 1996 году, несколько псевдо-селекторы были включены, многие из которых вы, вероятно, использовать почти каждый день.Например:

  • :link
  • :visited
  • :hover
  • :active

Каждое из этих состояний может быть применен к элементу, обычно <a>, после которой идет имя псевдо-класса.Удивительно думать, что эти псевдо-классы прибывшие на место происшествия до HTML4 была опубликована W3C года спустя, в декабре 1997.

CSS2 Arrives

По горячим следам CSS1 была CSS2, чья рекомендуемая спецификация была опубликована лишь два года спустя, в мае 1998 года.Наряду с захватывающей вещи, как позиционирование новые псевдо-классы. :first-child и :lang()

:langЕсть несколько способов, чтобы указать язык документа, и если вы используете HTML5, то, скорее всего, будет, положив <html lang="en"> сразу после того, тип документа (с указанием вашем родном языке, конечно).Теперь Вы можете использовать :lang(en) стиль элементов на странице, которая полезна, когда изменения языка dynamically.

:first-childВозможно, Вы уже использовали :first-child в ваших документах.Он часто используется для добавления или удаления верхней границы на первый элемент в списке.Странно, что он не сопровождался :last-child, мы должны были ждать, пока CSS3 была предложена прежде чем он сможет выполнить свои brother.

Почему используется псевдо-классы

Что делает псевдо-классы настолько полезно, что они позволят вам стиль содержание dynamically.В <a> приведенном выше примере, мы можем описать, каким ссылки оформлены, когда пользователь взаимодействует с ними.Как мы увидим, новый псевдо-классы позволяют нам динамично стиль контента на основе его положения в документ или его state.

Шестнадцать новых псевдо-классы, были введены как часть W3C, CSS Предлагаемые Recommendation, и ониразбиты на четыре группы: структурные псевдо-классы, псевдо-классы для государств элементы пользовательского интерфейса, цель псевдо-класса и отрицания псевдо-class.

Screenshot W3C является домом CSS.

Давайте теперь работать через 16 новых псевдо-селекторы по одному и посмотрим, как каждый из них используется.Я буду использовать те же обозначения для именования классов, которые использует W3C, где E является элементом, n является числом, а s является selector.

Пример Code

Для многих из этих новых селекторов, я также ссылаются на пример кода, так что вы можете увидеть, какой эффект имеет CSS.Мы будем принимать правильную форму и сделать его пригодным для iPhone с помощью наших новых CSS3 псевдо-classes.

Обратите внимание, что мы могли бы, вероятно, использовать ID и селекторы класса на протяжении большей части этой формы, но это отличная возможность взять наш новый псевдо-классов за спину и продемонстрировать, как вы могли бы использовать их в реальный пример.Вот HTML (который вы можете увидеть в действии

Screenshot Наша форма, до и after.

1.Структурные псевдо-Classes

В соответствии с W3C, структурные псевдо-классы выполните следующие действия:

… Разрешение выбор на основе дополнительной информации, которая лежит в дереве документа, но не могут быть представлены другими простыми селекторами или combinators.

Что это означает, что мы должны селекторов, которые были с турбонаддувом для динамического выбора контента на основе его положения в документе.Итак, давайте начнем с самого начала документа, с :root.

Screenshot Уровень 3 селекторы по W3C website.

E: root

:root псевдо-класс выбирает корневой элемент на странице.Девяносто девять раз из ста, это будет <html> элемент.Например: 

:root { background-color: #fcfcfc; }

Следует отметить, что вы могли бы стиль <html> элемента вместо этого, который, возможно, немного более наглядным: 

html { background-color: #fcfcfc; }

iPhone форма ExampleДавайте перейдем к нашим образцом кода и предоставить документ, некоторые основные текста и фона стили: 

: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() селектора может потребоваться несколько экспериментов, чтобы полностью понять.Самый простой реализации является использование ключевых слов odd илиeven, которые полезны при отображении данных, которая состоит из строк и столбцов.Например, мы могли бы использовать следующее: 

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) и так on.

Мы также можем использовать некоторые простые алгебры, чтобы сделать вещи еще более захватывающим.Рассмотрим следующий пример: 

li:nth-child(2n) { … }

Всякий раз, когда мы используем n Таким образом, он стоит для всех натуральных чисел (пока документ не бежит из элементов, чтобы выбрать!).В данном случае, было бы выбрать следующие пункты списка:

  • Ничего (2 × 0)
  • 2-й элемент (2 × 1)
  • 4-й элемент (2 × 2)
  • 6-й элемент (2 × 3)
  • 8 элементов (2 × 4)
  • Etc.

Это на самом деле дает нам то же самое, nth-child(even).Итак, давайте все перемешать немного: 

li:nth-child(5n) { … }

Это дает нам:

  • Ничего (5 × 0)
  • 5-й элемент (5 × 1)
  • 10 элемента (5 × 2)
  • 15 элемента (5 × 3)
  • 20 элемента (5 × 4)
  • Etc.

Возможно, это было бы полезно для длинных списков или таблиц, возможно, нет.Мы также можем складывать и вычитать числа в этом уравнении: 

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)
  • Etc.

SitePoint точки out интересная причуда здесь.Если вы установите n как отрицательные, вы сможете выбрать первое число х пунктов следующим образом: 

li:nth-child(-n + x) { … }

Допустим, вы хотите, чтобы выбрать первые пять элементов в списке.Вот CSS: 

li:nth-child(-n + 5) { … }

Это дает нам:

  • 5-й элемент (-0 5)
  • 4-й элемент (-1 5)
  • 3-й элемент (-2 5)
  • 2-й элемент (-3 5)
  • 1-го элемента (-4 5)
  • Nothing (-5 5)
  • Nothing (-6 5)
  • Etc.

Если вы перечислением данных в порядке популярности, то выделение, скажем, 10 лучших записей может быть useful.

WebDesign & Such создал демо-зебра striping, который является прекрасным примером того, как можно использовать nth-child В practice.

Screenshot Зебра стол с 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;
}

Эффект тонкий на сайте, но он добавляет уровень детализации, который будет не хватать в старых browsers.

Screenshot : П-го ребенка селекторы в действии на Webvisionary Awards.

iPhone форма ExampleМы могли бы использовать :nth-child в нескольких местах в нашем примере iPhone форме, но давайте остановимся на одном.Мы хотим, чтобы скрыть метки для первых трех fieldsets из виду и использовать замещающий текст вместо этого.Вот CSS: 

form:nth-child(-n+3) label { display: none; }

Вот, мы смотрим в течение первых трех детей <form> элементов (которые все fieldsets в нашем коде) и затем выберите метку.Мы тогда скрыть эти этикетки с display: none;.

E: п-го последнего ребенка (п)

Не довольствуясь заблуждение всех нас с :nth-child() псевдо-класса, умные люди в W3C также дал нам :nth-last-child(n).Он работает так же, как :nth-child() исключением в обратном, считая от последнего элемента в selection.

li:nth-last-child(1) { … }

Выше выберет последний элемент в списке, в то время как следующий будет выбрать предпоследний элемент: 

li:nth-last-child(2) { … }

Конечно, вы можете создать другие правила, как этот: 

li:nth-last-child(2n+1) { … }

Но вы бы скорее всего, хотят использовать следующую выбрать последние пять элементов списка (по логике см. выше): 

li:nth-last-child(-n+5) { … }

Если и это не имеет смысла, Lea Verou создал полезный CSS3 структурные псевдо-селектора класса tester, который, безусловно, стоит проверить out.

Screenshot CSS3 структурные псевдо-селектора класса tester.

iPhone форма ExampleМы можем использовать :nth-last-child В нашем примере, чтобы добавить закругленные углы нашего вход для Вот наш CSS, который является слишком конкретным, но дает вам представление о том, как мы можем цепочки псевдо-селекторы вместе “Номер карты”.: 

fieldset:nth-last-child(2) input:nth-last-of-type(3) {
border-radius: 10px; }

Мы сначала захватить предпоследний набор полей и выбора входа, который является третьим из последних (в данном случае, наш “номер карточки” ввода).Затем мы добавляем border-radius.

: П-о-типа (п)

Сейчас мы получим еще более конкретным и примените стили только к определенным types элемента.Например, предположим, что вы хотели стиля в первый абзац статьи с более крупным шрифтом.Вот 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) { … }

Это стоит помнить, что если вам нужно получить конкретную информацию о таргетинга, то, используя описательные имена класса, а не могли бы быть более useful.

Саймон Фостер создал красивые инфографики о его 45 RPM записей collection, и он использует :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);
}

А вот как это выглядит на своем сайте:

Screenshot “. Для Record” го-о-тип селектора на

iPhone форма ExampleДопустим, мы хотим, чтобы каждый второй элемент входной иметь закругленные углы на дне.Мы можем добиться этого с CSS: 

input:nth-of-type(even) {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

В нашем примере, мы хотим применить это только к FIELDSET для оплаты, так как набор полей для персональных данных имеет три входа текстом.Мы также получить немного сложнее, и убедитесь, что мы don’t выбрать любой из входов радио.Вот окончательный 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 далее в этой article.

: П-последний-в-типа (п)

Будем надеяться, что теперь вы видите, где это происходит: :nth-last-of-type() начинается в конце выбранных элементов и работает backwards.

Для выбора последнего пункта в статье, вы должны использовать это: 

article p:nth-last-of-type(1) { … }

Вы можете выбрать этот селектор вместо :last-child, если ваши статьи не всегда заканчиваются paragraphs.

: Первый в типе и: последний из-type

Если :nth-of-type() и :nth-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 …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.