28.01.2013, 01:00

Шпаргалка по новым селекторам CSS3



И так, без вступительных речей, сразу к делу:
*
Код

* {
  margin: 0;
  padding: 0;
}

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для "обнуления" всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта
Код

#container * {
  border: 1px solid black;
}


Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera

a:visited и a:link
Код

a:link {
color: red;
}

a:visited {
color: purple;
}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a + b
Код

ul + p {
  color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента ul будет красного цвета.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a > b
Код

#container > ul {
  border: 1px solid black;
}

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

<div id="container">
  <ul>
  <li>Элемент списка
  <ul>
  <li>Потомок</li>
  </ul>
  </li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  <li>Элемент списка</li>
  </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a ~ b
Код

ul ~ p {
  color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a[title]
Код

a[title] {
  color: green;
}

Здесь мы обращаемся к атрибуту селектора. В нашем примере будут окрашены в зеленый цвет только ссылки, имеющие атрибут title.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a[href="link"]
Код

a[href="http://www.apo-ucoz.com"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a[href*="link"]
Код

a[href*="ucoz"] {
  color: red;
}

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.site.ru и www.site.ru и site.ru.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera


a[href^="http"]
Код

a[href^="http://"] {
  background: url(link) no-repeat;
  padding-left: 10px;
}

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

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

"Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://."

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a[href$=".jpg"]
Код

a[href$=".jpg"] {
  color: red;
}

И снова мы используем регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением .jpg. Разумеется, такой подход не будет работать для картинок с расширениями .gif, .png и т.д.

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera

a[data-*="foo"]
Код

a[data-filetype="image"] {
  color: red;
}

Как же мы можем охватить различные типы картинок? Мы можем создать, например, несколько селекторов:
Код

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
  color: red;
}

Но это муторно и не элегантно. Другой вариант - это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку
Код

<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>

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

a[data-filetype="image"] {
  color: red;
}

Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera


a[foo~="bar"]
Код

a[data-info~="external"] {
  color: red;
}

a[data-info~="image"] {
  border: 1px solid black;
}

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.
Код

<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:
Код

/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
  color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}


Совместимость:
* IE7+
* Firefox
* Chrome
* Safari
* Opera


a:checked
Код

input[type=radio]:checked {
  border: 1px solid black;
}

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera


a:after
Код

.clearfix:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
  }

.clearfix {
  *display: inline-block;
  _height: 1%;
}

Данный пример показывает, как с помощью псевдо-класса :after после блока с классом .clearfix создаётся пустая строка, после чего очищается. Хороший метод, когда невозможно применить overflow: hidden.

Данный псевдо-класс позволяет сгенерировать контент вокруг выбранного элемента.

Совместимость:
* IE8+
* Firefox
* Chrome
* Safari
* Opera

a:hover
Код

div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде "псевдо-класс, основанный на действии пользователя". Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

"Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а."

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:
Код

a:hover {
  border-bottom: 1px solid black;
}


"Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;"

Совместимость:
* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

a:not(selector)
Код

div:not(#container) {
  color: blue;
}

Отрицание может быть также очень полезным. Предположим, я хочу выбрать все блоки div, кроме одного с идентификатором container. Для этого отлично подойдет код выше.

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

*:not(p) {
  color: green;
}


Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera

a::pseudoElement
Код

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}

Псевдоэлементы можно использовать для придания стилей фрагменту элемента, например, первой строке или первой букве. Применяется только к блочным элементам.

Выбираем первую букву параграфа:
Код

p::first-letter {
  float: left;
  font-size: 2em;
  font-weight: bold;
  font-family: cursive;
  padding-right: 2px;
}


Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта "газетного заголовка".

Выбираем первую строку параграфа:
Код

p::first-line {
  font-weight: bold;
  font-size: 1.2em;
}


Аналогично предыдущему примеру, но в данном случае будет выбрана первая строка каждого параграфа.

Совместимость:
* IE6+
* Firefox
* Chrome
* Safari
* Opera

a:nth-child(n)
Код

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

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

В качестве параметра принимается целое число. Если нужно выбрать 2-й элемент списка, нужно использовать конструкцию: li:nth-child(2).

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:
* IE9+
* Firefox
* Chrome
* Safari


a:nth-last-child(n)
Код

li:nth-last-child(2) {
  color: red;
}

Что, если у Вас есть большой неупорядоченный список и Вам нужно, к примеру, выбрать третий элемент с конца. Вместо того, чтобы писать li:nth-child(397), Вы можете воспользоваться псевдо-классом nth-last-child.

Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera


a:nth-of-type(n)
Код

ul:nth-of-type(3) {
  border: 1px solid black;
}


Иногда бывают ситуации, когда вместо того, чтобы выбирать определенных потомков, нужно сделать выбор по типу элемента.

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных "зацепок", то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari

a:nth-last-of-type(n)
Код

ul:nth-last-of-type(3) {
  border: 1px solid black;
}

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera


a:first-child
Код

ul li:first-child {
  border-top: none;
}

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

Для устранения этого недостатка можно использовать данный псевдо-класс.

Совместимость:
* IE7+
* Firefox
* Chrome<
* Safari
* Opera


a:last-child
Код

ul > li:last-child {
  color: green;
}

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

Совместимость:
* IE9+
* Firefox
* Chrome
* Safari
* Opera


a:only-of-type
Код

li:only-of-type {
  font-weight: bold;
}

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ - использовать only-of-type.
Код

ul > li:only-of-type {
  font-weight: bold;
}


Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

a:first-of-type
Код

ul:first-of-type > li:nth-child(2) {
  font-weight: bold;
}

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

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

<div>
  <p>Здесь параграф.</p>
  <ul>
  <li>Элемент 1.</li>
  <li>Элемент 2.</li>
  </ul>

  <ul>
  <li>Элемент 3.</li>
  <li>Элемент 4.</li>
  </ul>
</div>


Сейчас, не читая дальше, попробуйте придать стиль только "элементу 2". Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1
Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:
Код

ul:first-of-type > li:nth-child(2) {
  font-weight: bold;
}


Данный код гласит: "Найди первый неупорядоченный список на странице, затем найди только его прямых потомков, являющихся элементами li. После этого выбери только второй по порядку элемент li."

Решение 2
Другой вариант - воспользоваться смежным селектором:
Код

p + ul li:last-child {
  font-weight: bold;
}


Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3
Можно еще немного поиграть с селекторами и поступить таким образом:
Код

ul:first-of-type li:nth-last-child(1) {
  font-weight: bold;
}


Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

Совместимость:
* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

Источник/Автор: apo-ucoz.com

Категория: HTML, CSS, JS, JQ | Добавил: sold93 (28.01.2013) Просмотров: 2211 | Рейтинг: 5.0/2
Теги: шпаргалка, селекторы, CSS3, новые
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]