Все селекторы css

Все селекторы css - Liber.pro - личный сайт Алексея Либера Картинка  1

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

1. *

* { margin: 0; padding: 0; border: 0;}

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

#parent * { border: 3px solid white; }

В этом случае будут выделены дочерние элементы #parent.

  • IE6 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

2. X:link, X:visited

a:link { color: blue; }
a:visited { color: orange; }

link и visited это псевдо-классы. link ссылки еще не посещенные, а visited наоборот.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

3. X + Y

div + span { color: green; }

Выделяет только элемент Y следующий сразу за X.

<div>Hello</div>
<span>world!</span>
<span>I</span>
<span>web-developer</span>

В данном случае содержимое первого <span> будет зеленого цвета.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

4. X > Y

div#block > ul { border: 5px solid white; }

В данном случае будут выбраны только ul, у которых div#block будет непосредственным родителем.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

5. X ~ Y

div + span { color: green; }

Этот селектор похож на X + Y, но более жадный.

<div>Hello</div>
<span>world!</span>
<span>I</span>
<span>web-developer</span>

В данном случае содержимое всех тегов <span> будет зеленого цвета.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

6. X[title]

a[title] { color: gray; }

В CSS можно также использовать атрибуты. В данном случае будут выделены все ссылки, которые имеют атрибут title.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

7. X[href="Yoo"]

a[href="http://true-look.com"] { color: red; }

Все ссылки, которые ссылаются на http://true-look.com будут красного цвета. Правило хорошее, но не гибкое т.к. ссылка может вести на http://true-look.com/login/register/ и уже к ней это правило применяться не будет.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

8. X[href*="aabbbccc"]

a[href*="true-look.com"] { color: red; }

Этот селектор выделит все ссылки у которых атрибут href содержит true-look.com. Но будьте внимательны потому как href может выглядеть так http://pld.name?redirect=true-look.com и такая ссылка тоже будет выделена.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

9. X[href^="http"]

a[href^="http"] {
   background: url(images/icons/icon.png) no-repeat;
   padding-left: 5px;
}

Будут выделены все ссылки у которых содержимое атрибута href начинается на http.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

10. X[href$=".ico"]

a[href$=".ico"] { color: green; }

Будут выделены все ссылки у которых содержимое атрибута href заканчивается на .ico.

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

11. X[data-*="doc"]

К примеру у нас есть ссылки с пользовательским атрибутом

<a href="public/doc/license.jpg" data-filetype="doc"> Ссылка на документ </a>

вот таким селектором мы их сможем выделить

a[data-filetype="doc"]{ color: blue; }
  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

12. X[Yoo~="atr"]

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

<a href="http://true-look.com/images/pic.jpg" data-info="external image"> Ссылка на картинку </a>

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

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

Вот задача и решена. И это все только используя CSS!

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • Opera

 

13. X:checked

Используя этот псевдо-класс можно выбрать элементы input типа radio или checkbox и причем только те которые выбраны/отмечены.

input[type=radio]:checked { border:8px solid yellow; }
  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

14. X:after

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

Этот хак использует псевдо-класс :after для того чтобы добавить пробел после элемента и запретить его обтекание. Есть еще аналогичный псевдо-класс :before.

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

15. X:hover

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

div:hover { background: #ffffff; }

Будте внимательно т.к. в IE6 этот псевдо-класс должен применяться только к ссылкам.

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

16. X:not(selector)

Как уже можно было догадаться — это отрицание.

div:not(#main) { margin: 0; }

Этим селектором выбрали все div за исключением того, у которого id=main.

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

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

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

p::first-letter {
    float: left;
    font-size: 4em;
    font-weight: bold;
    font-family: cursive;
    padding-right:4px;
}
p::first-line {
   font-weight: bold;
   font-size: 2.2em;
}
  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

18. X:nth-child(n)

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

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

Можно выбрать каждый пятый элемент написав

li:nth-child(5n) { color: blue; }
  • IE9+
  • Firefox 3,5
  • Chrome
  • Safari
  • Opera

 

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

Можно выделить N-ный элемент с конца. Это особенно удобно если у вас есть большой список.

li:nth-of-type(4) { border: 1px solid white; }
  • IE9+
  • Firefox 3,5
  • Chrome
  • Safari
  • Opera

 

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

ul:nth-of-type(3) { border: 4px solid blue; }

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

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

  • IE9+
  • Firefox 3,5
  • Chrome
  • Safari
  • Opera

 

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

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

ul:nth-last-of-type(3) { border: 4px solid blue; }
  • IE9+
  • Firefox 3,5
  • Chrome
  • Safari
  • Opera

 

22. X:first-child

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

ul li:first-child { border-top: none; }
  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

23. X:last-child

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

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

Обратите внимание! Предыдущий селектор поддерживается начиная с IE7, а этот только с IE9!

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

24. X:only-child

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

Довольно редкий селектор. Выберет только те <p>, которые единственные внутри <div>.

<div>
    <p> Я первый параграф.</p>
</div>
<div>
    <p> Я второй параграф </p>
    <p> Я третий параграф </p>
</div>

В данном примере будет выбран тег <p> из первого div т.к. он там единственный дочерний.

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

 

25. X:only-of-type

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

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

div p:only-of-type { font-color: red; }
<div>
   <p>Hello</p>
   <span>!!!</span>
</div>
<div>
   <p>Hello</p>
   <p>World</p>
   <span>!!!</span>
</div>

Из этого примера будет выбран тег <p> из первого div.

  • IE9+
  • Firefox 3.5
  • Chrome
  • Safari
  • Opera

 

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

Решение 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
  • Chrome
  • Safari
  • Opera

Изучаем CSS :)

comments powered by HyperComments