В данной статье речь пойдет про CSS-селекторы. Будут рассмотрены как старые CSS-селекторы, которые поддерживает даже IE6, так и совсем новые CSS3-селекторы, которые поддерживают только последние версии браузеров. Итак, начнем.

1. *****

* { margin: 0; padding: 0; }

Начнем с самого простого, а потом

уже перейдем к более продвинутым вещам.

Этот CSS-селектор выделяет каждый

элемент на странице. Многие разработчики используют его для того, чтобы скинуть

у всех элементов значения margin и padding. На первый взгляд это удобно, но

все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно

грузит броузер.

  • также

можно использовать для выделения дочерних элементов.

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

В данном случае выделяться все

дочерние элементы #container. Опять же, старайтесь не злоупотреблять им.

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera


2. #X

container { width: 960px; margin: auto; }

Знак решетки перед CSS-селектором Х выделит нам элемент с id = Х. Это очень просто, но будьте аккуратны при использовании id.

Спросите себя: мне абсолютно необходимо выделение по id?

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

псевдо-классов.

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera


3 .Х

error { color: red; }

Это CSS-селектор класса Х. Разница

между id и классом заключается

в том, что одному классу может принадлежать несколько элементов на странице.

Используйте классы, когда вы хотите применить стиль к нескольким однотипным

элементам. При использовании id вам придется писать стиль для каждого

отдельного элемента.

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome


4. Х Y

li a { text-decoration: none; }

CSS-селектор дочерних элементов

встречается чаще всего. Если вам надо выделить элементы

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

селектор. Например, вам надо выделить все ссылки, которые находятся в элементе

li. В этом случае используйте этот селектор.

Не следует делать CSS-селекторы вида _Х Y Z A

B.error__. Всегда спрашивайте себя, а обязательно

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

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome


5. X

a { color: red; }
ul { margin-left: 0; }

Что делать, если вы хотите, чтобы

охватить все элементы данного типа на странице? Будьте проще, используйте

CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .

Демо

Совместимость

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera


a:link { color: red; }
a:visted { color: purple; }

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

Если же нам надо применить

определенный стиль у уже посещенным ссылкам, то используем псевдо-класс

:visited.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera


7. Х+Y

ul + p { color: red; }

Выделяет последующий элемент. Он

будет выбирать только элемент типа Y, который

идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome


8. Х>Y

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

Разница между стандартными Х Y и X > Y состоит

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

следующий код.

<div id="container">

    <ul>

        <li> Элемент списка
            <ul>
                <li> Дочерний элемент</li> 
            </ul>
        </li>

        <li> Элемент списка </li>

        <li> Элемент списка </li>

        <li> Элемент списка </li>

    </ul>

</div>

CSS-селектор #container

ul выберет только ul-ы, которые являются

непосредственными дочерними элементами div с id =container . Он не выберет, например, ul-ы, являющиеся

дочерними элементами первых li .

Поэтому можно получить выигрыш в

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

рекомендуется при работе с jQuery или другими библиотеками, выбирающими

элементы на основе правил CSS -селекторов.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera


9. Х ~ Y

ul ~ p { color: red; }

Этот CSS-селектор очень похож на X + Y, однако, является менее строгим. При использовании ul + p будет выбрать только первый элемент, идущий за Х. В данном случае будут

выбраны все элементы p, идущие на ul.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera


10. X[title]

a[title] { color: green; }

В CSS-селекторах также можно

использовать атрибуты. Например в данном примере мы выделили все ссылки,

имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera


11. X [href=“Foo”]

a[href="http://everstudent .ru"] { color: #ffde00; }

Все ссылки, которые ссылаются на

everstudent.ru будут золотыми. Все остальные ссылки останутся неизменными

неизменным.

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и

других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По

возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком

строгое. Что же делать, если ссылка ведет не непосредственно на everstudent.ru,

а например на http://everstudent.ru/portfolio ? В этих случаях мы можем

использовать регулярные выражения.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome


12. **X [HREF *=

“everstudent.ru”;]**

a[href*="everstudent"] { color: # 1f6053; }

Вот то, что нам нужно. Звезда

обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор

охватывает _everstudent.ru,

http://everstudent.ru/portfolio_ и т.д.

Но что делать, если ссылка ведет на какой-то сторонних и не связанный

ресурс, в адресе которого присутствует everstudent? Тогда нужно использовать “^”;или “&“;, для ссылки на начало и конец строки соответственно.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera


13. X[href^=“;http”;]

a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Вы никогда не задумывались, как

некоторые веб-сайты могут отображать маленький значок рядом с внешними

ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.

”^“; — наиболее часто

используемый в регулярных выражениях символ. Он используется для обозначения

начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо

использовать CSS-селектор, приведенных выше.

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

А если мы хотим задать стиль

только для ссылок, ведущих на фотографию? Нужно искать конец строки.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Хром
  • Safari
  • Опера


14. X [href$=“;. JPG”;]

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

Опять же, мы используем символ

регулярного выражения “$”; для

обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит “.jpg”;.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Хром
  • Safari
  • Опера


15. X[data-*=“;foo”;]

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

Как же нам теперь написать

CSS-селектор, который бы выделял ссылки на все виды изображений? Например, мы могли бы написать

так:

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>

Теперь мы можем выделить такие ссылки при помощи данного CSS-селектора:

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

Демо

Совместимость

  • IE7 +
  • Firefox
  • Хром
  • Safari
  • Опера


16. X[foo~=“;bar”;]

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

А вот кое-что особенное. Не все

знают об этом CSS-селекторе. Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных

запятой.

Например, мы можем задать наш

собственный атрибут data-info, в котором указывать несколько ключевых слов

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

ссылается на изображение.

"<a href="path/to/image.jpg" data-info="external image"> Click Me </a>

Вот, Html-код на месте, теперь

напишем стили.

/ * Выбираем ссылки с атрибутом data-info, содержащий значение "external" * /
a[data-info~="external"] { color: red; }
/ * И которые содержат значения "image" * /
a[data-info~="image"] { border: 1px solid black; }

Неплохо, да?

Демо

Совместимость

  • IE7 +
  • Firefox
  • Хром
  • Safari
  • Опера

17. X:checked

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

Этот псевдокласс выделяет только

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

которые отмечены/выбраны. Очень просто.

Демо

Совместимость

  • IE9 +
  • Firefox
  • Хром
  • Safari
  • Опера


18. X:after

Псевдоклассы :before и :after очень

крутые. Создается впечатление, что

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

Многие познакомились с этими

псевдоклассами при работе с clear-fix hack.

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

Этот хак использует :after чтобы добавить пробел после элемента, а запретить его обтекание.

Согласно спецификации CSS3, вы должны использовать два двоеточия (::). Однако, можно использовать и одно двоеточие для совместимости.

Совместимость

  • IE8 +
  • Firefox
  • Хром
  • Safari
  • Опера


19. X:hover

div:hover { background: #e3e3e3; }

Хотите применить стиль к

элементу, когда наводите на него мышкой? Тогда этот CSS-селектор для вас.

Имейте в виду, что старые версии Internet Explorer применяют :hover только к ссылкам.

Этот CSS-селектор часто используют для того,

чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

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

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

Совместимость

  • IE6 + (В IE6: hover должен быть применен

    к ссылке)

  • Firefox

  • Хром

  • Safari

  • Опера


20. X:not(selector)

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

Псевдокласс отрицания бывает очень

полезным. Скажем, я хочу выбрать все

div, за исключением того, который имеет id = container .

Приведенный выше код справиться с этим!

Или, если бы я хотел выбрать все

элементы, за исключением p.

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

Демо

Совместимость

  • IE9 +
  • Firefox
  • Хром
  • Safari
  • Опера


21. X::псевдо элемент

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;
}

Аналогичным образом благодаря ::first-line мы задаем стиль первой строки в абзаце.

“Для совместимости с существующими таблицами стилей, браузер должен

понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в

CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не

допускается для новых псевдо-элементов, введенных в этой спецификации”; Источник

Демо

Совместимость

  • IE6 +
  • Firefox
  • Хром
  • Safari
  • Опера


22. X:nth-child(n)

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

Раньше мы не могли выделить,

например, третий дочерний элемент? nth-child решает

это!

Обратите внимание, что nth-child принимает целое число в качестве параметра, однако отсчет ведется не

с 0. Если вы хотите выбрать второй пункт списка, используйте li:nth-child(2) .

Мы даже можем выбрать каждый четвертый элемент списка, просто написав {0}li:nth-child(4n){/0}.

Демо

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari


23. X:nth-last-child(n)

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

Что делать, если у вас огромный

список элементов в ul , а нем

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

Этот метод почти идентичен

приведенному выше, однако отсчет ведется с конца.

Демо

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari
  • Опера


24. X:nth-of-type(n)

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

Бывает, что надо выбрать не

дочерний элемент, а элемент определенного типа.

Представьте себе, что на странице

пять неупорядоченных списков. . Если вы хотите применить стиль

только к третьему ul, не имеющему уникального id, нужно использовать

nth-of-type.

Демо

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari


25. X:nth-last-of-type(n)

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

Мы можем также

использовать nth-last-of-type, отсчитывая элементы с конца.

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari
  • Опера


26. X:first-child

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

Этот псевдокласс выбирает первый

дочерний элемент. Часто используется чтобы убрать border в первом и

последнем элементе списка.

Демо

Совместимость

  • IE7 +
  • Firefox
  • Хром
  • Safari
  • Опера


27. X:last-child

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

В противоположность :first-child :last-child выбирает

последний дочерний элемент.

Демо

Совместимость

  • IE9 + (Да да, IE8 поддерживает

    :first-child , но не поддерживает :last-child. Microsoft-у привет! )

  • Firefox

  • Хром

  • Safari

  • Опера


28. X:only-child

div p:only-child { color: red; }

Вы не часто встретите этот

псевдокласс, тем не менее он существует.

Он позволяет вам выбрать элементы,

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

стиль к этому html-коду:

<div>
    <p> Один параграф.</p>
</div>
<div>
    <p> Два параграфа </p>
    <p> Два параграфа </p>
</div>

Будет выбран p только первого

div`a, потому что он единственный дочерний элемент.

Демо

Совместимость

  • IE9 +
  • Firefox
  • Хром
  • Safari
  • Опера


29. X:only-of-type

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

Очень интересный псевдокласс. Он

затрагивает элементы, не имеющие соседей в пределах родительского

элемента. В качестве примера выберем ul только

с одним элементом в списке.

Единственное решение заключается в

использовании only-of-type .

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

Демо

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari
  • Опера


30. X:first-of-type

first-of-type выбирает первый элемент заданного типа.

Чтобы лучше понять, приведем

пример.

<div>  
    <p> Параграф </p>  
    <ul>     
        <li> Пункт 1 </li>     
        <li> Пункт 2 </li>  
    </ul>  
    <ul>     
        <li> Пункт 3 </li>     
        <li> Пункт 4 </li>  
    </ul>
<div>

А теперь попытайтесь понять как

выделить пункт 2.

Решение 1

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

Решение 2

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

Решение 3

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

Демо

Совместимость

  • IE9 +
  • Firefox 3,5 +
  • Хром
  • Safari
  • Опера

Источник статьи: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Комментарии

comments powered by Disqus