30 селекторов css – 30 css селекторов, необходимых каждому верстальщику | Бортовой журнал Ктулху

Содержание

30 CSS-селекторов, которые вы должны знать

Поговорим о CSS селекторах. Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Рассмотрим их в статье подробнее. Некоторые селекторы поддерживаются всеми браузерами, некоторые только самыми новыми версиями браузеров.

 

1. * — выделение всех элементов

* {
 margin: 0;
 padding: 0;
}

Начнем с простых селекторов, и затем рассмотрим более сложные. Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.

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

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

В данном случае выделяться все дочерние элементы блока #container. Старайтесь не злоупотреблять им.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

2. #X

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

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

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

3 .Х

.error {
  color: red;
}

Это CSS-селектор класса Х. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам. При использовании id вам придется писать стиль для каждого отдельного элемента.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

 

4. Х Y

30 CSS-селекторов, которые нужно знать

В данной статье речь пойдет про 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
Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

5. X

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

Что делать, если вы хотите, чтобы охватить все элементы данного типа на странице? Будьте проще, используйте CSS-селектор типа. Если вы должны выделить все неупорядоченные списки, используйте ul {} .

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

6. X:visited and X:link

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>
    <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://ergoz.ru"] { color: #ffde00; }

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

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на ergoz.ru, а например на http://ergoz.ru/portfolio ? В этих случаях мы можем использовать регулярные выражения.

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

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

В данной статье речь пойдет про 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

6. X:visited and X:link

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>
     
    <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="https://vavik96.com"] { color: #ffde00; }

 

Все ссылки, которые ссылаются на vavik96.com будут золотыми. Все остальные ссылки останутся неизменными неизменным.

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на https://vavik96.com, а например на https://vavik96.com/category/web/ ? В этих случаях мы можем использовать регулярные выражения.

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

12. X [HREF *= “vavik96.com”]

a[href*="vavik96.com"] { color: # 1f6053; }

 

Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает vavik96.com, https://vavik96.com/category/web/ и т.д.

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

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

  • 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
  • Опера

Источник

30 CSS-селекторов, которые должен знать каждый

Если Вы разобрались с основными селекторами: id, class, селекторами потомков и считаете что этого достаточно, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

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

1. *

* {
 margin: 0;
 padding: 0;
}

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

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

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

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

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

2. #X

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

Символ решетки позволяет нам отбирать элементы по идентификатору. Это один из наиболее распространенных способов отбора элементов, однако будьте осторожны при его использовании.

“Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?”

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

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

3. .X

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

В противном случае используйте id для нахождения “иголки в стоге сена” и применения стиля только к одному конкретному объекту.

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

4. X Y

li a {
  text-decoration: none;
}

Следующий часто используемый тип селектора - селектор потомка. Его следует использовать, когда нужно производить более точечный отбор элементов.

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

“Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ”

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

5. X

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

Что, если Вы хотите сослаться на все элементы определенного типа на странице, но у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

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

6. X:visited и X:link

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

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

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

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

7. X + Y

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

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

8. X > Y

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

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

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

9. X ~ Y

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

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

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

10. X[title]

a[title] {
   color: green;
}

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

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

11. X[href=”foo”]

a[href="https://migo.com.ua"] {
  color: red;
}

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

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на MIGO.COM.UA но, возможно, адрес указан, как migo.com.ua а не https://migo.com.ua? В таких случаях мы можем использовать основы регулярных выражений.

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

12. X[href*=”migo”]

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

Это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и https://migo.com.ua и migo.com.ua.

Совместимость: 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, то мы можем использовать селектор из примера выше.

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

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

14. X[href$=”.jpg”]

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

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

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

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

a[data-filetype="image"] {
   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

16. X[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

17. X:checked

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

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

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

18. X: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

19. X:hover

div:hover {
  background: #e3e3e3;
}

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

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

20. X:not(selector)

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

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

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

21. X::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;
}

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

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

22. X:nth-child(n)

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

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

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

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

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

23. X: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

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

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

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

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

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

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

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

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

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

26. X:first-child

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

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

27. X:last-child

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

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

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

28. X:only-child

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

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

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

29. X:only-of-type

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

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

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

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

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

30. X:first-of-type

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

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

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

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

Цель: придать стиль только “элементу 2”. Есть много способов решить данную задачу. Остановимся только на одном из решений с использованием first-of-type:

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

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

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

Замечание: Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать “родные” CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать немного быстрее.

На этом все.

30 css селекторов, необходимых каждому верстальщику | Бортовой журнал Ктулху

Эта статья найдена на просторах интернета. Источник нет смысла указывать, т.к. она over 9000 раз перекопирована. Я посчитал ее весьма полезной для себя и решил с небольшими правками опубликовать.

Помимо обычного обращения к элементам через имя класса, id и название html тегов, можно использовать специальные комбинации и команды. Некоторые из этих селекторов поддерживаются даже старыми версиями браузеров.

Выделение всех элементов

---------- CSS ----------

* {
margin: 0;
padding: 0;
}

---------- /CSS ----------
Многие разработчики используют его для того, чтобы скинуть у всех элементов значения margin и padding. На первый взгляд это удобно, но все-таки в рабочем коде так лучше не делать. Этот CSS-селектор слишком сильно грузит браузер.

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

---------- CSS ----------

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

---------- /CSS ----------
В данном случае выделяться все дочерние элементы блока #container. Лучше не злоупотреблять им.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Выделение только определенного элемента

---------- CSS ----------

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

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

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

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Выделение группы элементов

.error {
color: red;
}
Это CSS-селектор класса. Разница между id и классом заключается в том, что одному классу может принадлежать несколько элементов на странице. Используйте классы, когда вы хотите применить стиль к нескольким однотипным элементам.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

Селектор дочерних элементов

---------- CSS ----------

li a {
text-decoration: none;
}

---------- /CSS ----------
Если нужно выделить элементы определенного типа из множества дочерних элементов, используете этот селектор. Например, вам надо выделить все ссылки, которые находятся в элементе li.

Не следует делать CSS-селекторы вида Х Y Z A B.error. Всегда спрашивайте себя, а обязательно ли для выделения данного элемента писать такой громоздкий CSS-селектор.

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

Выделение всех элементов определенного типа

---------- CSS ----------

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

---------- /CSS ----------
Если нужно охватить все элементы данного типа на странице, используйте CSS-селектор типа. Например, если вы должны выделить все неупорядоченные списки, используйте

---------- CSS ----------

ul {}

---------- /CSS ----------

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

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Выделение ссылок, на которые еще не кликнули

---------- CSS ----------

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

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

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

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

---------- CSS ----------

ul + p { color: red; }

---------- /CSS ----------
Он будет выбирать только элемент типа Y, который идет сразу после элемента Х. В примере текст первого абзаца после каждого ul будет красного цвета.

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

Непосредственные дочерние элементы

div#container > ul { border: 1pxsolidblack; }
Разница между стандартными Х Y и X > Y состоит в том, что рассматриваемый CSS-селектор будет выбирать только непосредственные дочерние элементы. Например, рассмотрим следующий код.

---------- HTML ----------

<div>

<ul>

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

 <ul>

    <li>Дочерний элемент</li>

</ul>

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

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

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

</ul>

---------- /HTML ----------

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

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Выбрать только первый элемент

---------- CSS ----------

ul ~ p { color: red; }

---------- /CSS ----------

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

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Атрибуты

---------- CSS ----------

a[title] { color: green; }

---------- /CSS ----------
В CSS-селекторах также можно использовать атрибуты. Например в данном примере мы выделили все ссылки, имеющие атрибут титле. Остальные ссылки останутся не затронутыми.

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Строгий селектор ссылки

---------- CSS ----------

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

---------- /CSS ----------
Все ссылки, которые ссылаются на yandex.ru будут золотыми. Все остальные ссылки останутся неизменными неизменным.

Обратите внимание, что на кавычки. Не забудьте так же делать в jQuery и других JavaScript библиотеках, в которых элементы выбираются по CSS-селекторам. По возможности, всегда используйте CSS3 CSS-селекторы.

Хорошее правило, но слишком строгое. Что же делать, если ссылка ведет не непосредственно на yandex.ru, а например на http://yandex.ru/page1? В этих случаях мы можем использовать регулярные выражения.

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Chrome

Дочерние ссылки

---------- CSS ----------

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

---------- /CSS ----------
Вот то, что нам нужно. Звезда обозначает, что искомое значение должно появляться где-нибудь в атрибуте. Таким образом, CSS-селектор охватывает yandex.ru, http://yandex.ru/somepage и т.д.

Но что делать, если ссылка ведет на какой-то сторонних и не связанный ресурс, в адресе которого присутствует yandex? Тогда нужно использовать «^»или «&», для ссылки на начало и конец строки соответственно.

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

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

Начало строки

---------- CSS ----------

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

---------- /CSS ----------
Вы никогда не задумывались, как некоторые веб-сайты могут отображать маленький значок рядом с внешними ссылками? Я уверен, что вы видели их прежде, они хорошо запоминаются.

«^» — наиболее часто используемый в регулярных выражениях символ. Он используется для обозначения начала строки. Если мы хотим охватить все тэги, у которых href начинается с http, нам надо использовать CSS-селектор, приведенных выше.

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

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

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

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

Конец строки

---------- CSS ----------

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

---------- /CSS ----------
Опять же, мы используем символ регулярного выражения «$» для обозначения конца строки. В данном мы ищем ссылки, которые ссылаются на jpg-файлы, или url-ы, в конце у которых стоит «.jpg».

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

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

Все виды изображений

---------- CSS ----------

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

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

---------- CSS ----------

a[href$=".JPG"],
a[href$=". JPEG"],
a[href$=".PNG"],
a[href$=".GIF"] {
color: red;
}

---------- /CSS ----------
Но это неэффективно. Другим возможным решением является применение пользовательских атрибутов. Почему бы нам не добавить наш собственный атрибут data-filetype в каждую ссылку?

---------- HTML ----------

<a href="/path to="image.jpg" data-filetype="image"> Ссылка на изображение </a>

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

---------- CSS ----------

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

---------- /CSS ----------
Совместимость:

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

Определенный атрибут из списка атрибутов

---------- CSS ----------

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

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

Например, можно задать собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Так можно указать что ссылка является внешней и что она ссылается на изображение.

---------- HTML ----------

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

---------- /HTML ----------
---------- CSS ----------

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

---------- /CSS ----------

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

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

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

---------- CSS ----------

input[type=radio]:checked { border:1pxsolidblack; }

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

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

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

Контент после элемента

Они просто присоединяют контент после выбранного элемента.

---------- /CSS ----------

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

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

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

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

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

Действие при наведении

---------- CSS ----------

div:hover { background: #e3e3e3; }

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

Этот CSS-селектор часто используют для того, чтобы поставить border-bottom на ссылки, когда на них наводят мышкой.

---------- CSS ----------

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

---------- /CSS ----------

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

  • IE6 + (В IE6: hover должен быть применен к ссылке)
  • Firefox
  • Хром
  • Safari
  • Опера

Отрицание

---------- CSS ----------

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

---------- /CSS ----------
Можно выбрать все div, за исключением того, который имеет id = container . Приведенный выше код справиться с этим!

Или, если бы я хотел выбрать все элементы, за исключением p.

---------- CSS ----------

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

---------- /CSS ----------
Совместимость:

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

Псевдоэлемент

---------- CSS ----------

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

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

Псевдо-элемент задается двумя двоеточиями: ::

Выбираем первую букву в параграфе

---------- CSS ----------

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

---------- /CSS ----------
Этот код выберет все параграфы, и в них в свою очередь выберет первые буквы и применит к ним этот стиль.

Выбираем первую строку в абзаце

---------- CSS ----------

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

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

«Для совместимости с существующими таблицами стилей, браузер должен понимать прежнее обозначения псевдо элементов с одним двоеточием, введенные в CSS 1, 2 (:first-line, :first-letter, :before and :after). Эта совместимость не допускается для новых псевдо-элементов, введенных в этой спецификации». Источник.

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

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

Указание номера потомка

---------- CSS ----------

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

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

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

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

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

Указание номера потомка с конца

---------- CSS ----------

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

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

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

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

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

Элемент определенного типа

---------- CSS ----------

ul:nth-of-type(3) { border: 1pxsolidblack; }

---------- /CSS ----------
Бывает, что надо выбрать не дочерний элемент, а элемент определенного типа.

Представьте себе, что на странице пять неупорядоченных списков. . Если вы хотите применить стиль только к третьему ul, не имеющему уникального id, нужно использовать nth-of-type.

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

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

Элемент определенного типа с конца

---------- CSS ----------

ul:nth-last-of-type(3) { border: 1pxsolidblack; }

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

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

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

Первый элемент списка

---------- CSS ----------

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

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

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

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

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

---------- CSS ----------

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

---------- /CSS ----------
В противоположность :first-child :last-child выбирает последний дочерний элемент.

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

  • IE9 + (Да да, IE8 поддерживает :first-child , но не поддерживает :last-child. Microsoft-у привет! )
  • Firefox
  • Хром
  • Safari
  • Опера

Только дочерние элементы

---------- CSS ----------

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

---------- /CSS ----------
Вы не часто встретите этот псевдокласс, тем не менее он существует.

Он позволяет вам выбрать элементы, которые являются единственными дочерними. Например, применим приведенный выше стиль к этому html-коду:

---------- HTML ----------

<div>

<p>Здесь идет единственный в блоке параграф.</p>

</div>

<div>

<p>Здесь идет первый параграф в блоке.</p>

<p>Здесь идет второй параграф в блоке.</p>

</div>

---------- /HTML ----------

Будет выбран p только первого div'a, потому что он единственный дочерний элемент.

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

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

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

---------- CSS ----------

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

---------- /CSS ----------
Очень интересный псевдокласс. Он затрагивает элементы, не имеющие соседей в пределах родительского элемента. В качестве примера выберем ul только с одним элементом в списке.

Единственное решение заключается в использовании only-of-type .

---------- CSS ----------

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

---------- /CSS ----------

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

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

Первый элемент определенного типа

first-of-type выбирает первый элемент заданного типа. Чтобы лучше понять, посмотрим на пример.

---------- HTML ----------

<div>

<p>Здесь параграф.</p>

<ul>

<li>Элемент 1.</li>

<li>Элемент 2.</li>

</ul>

<ul>

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

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

</ul>

</div>

---------- /HTML ----------

А теперь попытайтесь понять как выделить пункт 2.

Решение 1

---------- CSS ----------

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

---------- /CSS ----------
Решение 2

---------- CSS ----------

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

---------- /CSS ----------
Решение 3

---------- CSS ----------

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

---------- /CSS ----------
Совместимость:

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

10 CSS селекторов, без которых не следует верстать

10 CSS селекторов, без которых не следует верстать

От автора: Каждый раз при использовании CSS мы применяем селекторы. Но, несмотря на это, селекторы CSS –один из самых пренебрегаемых разделов спецификации.

Мы говорим о больших преобразованиях в CSS3, но часто забываем об основах. Правильное применение селекторов упрощает и украшает ежедневное кодирование. Сегодня я хочу рассказать о 10 селекторах, которые часто ускользают из памяти, но являются эффективными и очень полезными.

* (звездочка)

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

* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }

* {

   margin: 0;

   padding: 0;

   font-family: helvetica, arial, sans-serif;

   font-size: 16px;

}

10 CSS селекторов, без которых не следует верстать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

A + B

Этот селектор называется смежным и выбирает тот элемент, который следует сразу за первым. Если вам нужно выбрать первый div после верхнего колонтитула, то вы напишете:

header + div { margin-top: 50px; }

header + div {

   margin-top: 50px;

}

A > B

Этот селектор выберет только прямые дочерние элементы, в отличие от селектора A B, который выберет дочерние элементы A любого уровня. Этот селектор рекомендуется при работе с дочерними элементами первого уровня родительского элемента. Например, если вам нужно выбрать элементы списка первого уровня в неупорядоченном списке, это выглядит так:

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

Вы примените этот селектор потому, что обычный селектор A B также выберет элементы списка внутри вложенного неупорядоченного списка

ul > li { background: black; color: white; }

ul > li {

   background: black;

   color: white;

}

A[href*="example"]

Это – действительно классный селектор, когда нужно немного по-иному назначить стили отдельной ссылке; то, что находится в кавычках, будет сопоставлено с href ссылки. Например, для назначения стилей всем ссылкам на facebook синего цвета вы примените:

a[href*="facebook"] { color: blue; }

a[href*="facebook"] {

   color: blue;

}

Есть еще версия без *, которая сопоставляет точный url, который можно использовать для точных ссылок.

A:not(B)

Этот селектор особенно хорош из-за своего отрицательного выражения, позволяющего вам выбрать любую группу элементов, не совпадающих с тем, что вы размещаете в B. Если хотите выбрать каждый div за исключением нижнего колонтитула, вам нужно всего лишь:

10 CSS селекторов, без которых не следует верстать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

div:not(.footer) { margin-bottom: 40px; }

div:not(.footer) {

   margin-bottom: 40px;

}

A:first-child / A:last-child

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

ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }

ul li:first-child {  

   border: none;  

}    

ul li:last-child {  

   margin-right: 0px;

}

A:nth-child(n)

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

ul li:nth-child(3) { background: #ccc; }

ul li:nth-child(3) {

   background: #ccc;

}

Можно применять nth-child для выбора каждого множителя числа, используя переменную n , например, если вставить 3n, он выберет номер элемента списка 3, 6, 9, 12 и так далее.

A:nth-last-child(n)

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

ul li:nth-last-child(2) { background: #ccc; }

ul li:nth-last-child(2) {

   background: #ccc;

}

A:nth-of-type(n)

Этот селектор делает в точности то, о чем вы подумали; смотрит, элемент какого вида вы поместили в него и выбирает, например, третий элемент на вашей странице, соответствующий тому, что вы написали. Для выбора третьего абзаца в div’е вы примените:

div p:nth-of-type(3) { font-style: italic; }

div p:nth-of-type(3) {

   font-style: italic;

}

A:visited

Когда-нибудь обращали внимание на то, что при поиске чего-либо в google уже просмотренные вами страницы становятся другого цвета? Именно это делает селектор visited. Он – отличное дополнение для пользователей, но иногда он нем забывают и, судя по моему опыту, он очень удобен при поиске в google.

a:visited { color: blue; }

a:visited {

   color: blue;

}

Заключительная мысль

По моему опыту применение этих видов селекторов при вертске может сэкономить много времени, а также избежать необходимости в переполнении разметки множеством ID. И это – только начало, существует еще множество действительно удобных селекторов, о которых иногда забывают.

Автор: Sara Vieira

Источник: http://www.webdesignerdepot.com/

Редакция: Команда webformyself.

10 CSS селекторов, без которых не следует верстать

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее 10 CSS селекторов, без которых не следует верстать

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Соседние (смежные) и родственные селекторы CSS — учебник CSS

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

Соседние селекторы

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

Пример: допустим, вам необходимо, чтобы каждый абзац <p>, который идет первым после заголовка <h2>, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:


h2+p {
font-style: italic;
}

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).

Примеры написания:


/* Отступ от абзаца до картинки 30px */
p+img {
padding-top: 30px;
}

/* Зеленый цвет для абзаца, который следует после h4 в связке с h3 */
h3+h4+p {
color: green;
}

Родственные селекторы

Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~.

Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев <p>, которые идут после заголовка <h2>. Код CSS будет выглядеть так:


h2 ~ p {
  font-style: italic;
}

…и немного HTML для примера:


<div>
<p>Текст</p>
<h2>Заголовок 1</h2>
<p>Текст</p>
<p>Текст</p>
<h3>Заголовок 2</h3>
<p>Текст</p>
 </div>

<div>
<p>Текст</p>
 </div>

Взгляните на HTML-код: стиль применится ко всем тегам <p>, которые следуют после тега <h2> и находятся до закрывающего тега родителя <div>. В нашем варианте насчитывается 3 элемента <p>, к которым применится стиль. Обратите внимание, что тег <h3> этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу <p>, который находится над <h2>, а также к тегу <p>, имеющему другого родителя <div>.

Выводы

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *