Что значит символ в css
30 селекторов CSS, которые нужно запомнить
Дата публикации: 2010-12-11
От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.
Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.
Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Звездочку * также можно использовать для дочерних селекторов.
Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.
Совместимость
Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.
Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?
Селекторы id неподатливы и не позволяют повторного использования. Если возможно, сначала попробуйте использовать имя тэга, один из новых элементов HTML5, или даже псевдокласс.
Совместимость
Это — селектор class. Разница между id и class’ами в том, что при помощи последнего вы можете выбирать множественные элементы. Используйте class’ы, когда хотите применить стили к группе элементов. В качестве альтернативы используйте id для нахождения иголки в стогу сена и примените стиль к одному отдельному элементу.
Совместимость
4. X Y
Следующий наиболее комментируемый селектор — потомок. Пользуйтесь им, когда к своим селекторам нужно отнестись более конкретно. Например, что делать, если нежели выбирать все тэги-привязки all, лучше было бы сделать своей целью привязки внутри неупорядоченного списка? Вот когда вы определенно воспользовались бы наследованием селекторов.
Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.
Совместимость
Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul <>.
Совместимость
6. X:visited and X:link
Для выборки всех тэгов-привязок, на которые еще нужно щелкнуть, мы пользуемся псевдоклассом :link.
Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.
Совместимость
7. X + Y
Эта запись указывает на смежный селектор. Будет отбираться только тот элемент, которому непосредственно предшествует шаблонный элемент. В данном случае первый абзац после каждого элемента ul будет иметь текст красного цвета.
Совместимость
Разница между обычным X Y и X > Y состоит в том, что последний выберет только прямые дочерние элементы. Например, рассмотрите следующую разметку.
Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.
По этой причине преимущества производительности имеются в использовании дочернего комбинатора. Собственно, он чрезвычайно рекомендуется при работе с движками селекторов CSS, основанных на JavaScript.
Совместимость
Этот комбинатор находит одноуровневые узлы и идентичен X + Y, однако он менее строгий. В то время как смежный селектор (ul + p) выберет только первый элемент, которому непосредственно предшествует шаблонный элемент, этот селектор более общий. В вышеприведенном примере, он будет выбирать любые элементы p до тех пор, пока они следуют за ul.
Совместимость
10. X[title]
Совместимость
11. X[href=»foo»]
Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на //net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.
Обратите внимание, что мы заключаем значение в кавычки. Помните, что это также нужно делать при использовании движка селекторов JavaScript CSS. Предпочтительно перед неофициальными методами, всегда пользуйтесь селекторами CSS3, когда возможно.
Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.
Совместимость
12. X[href*=»nettuts»]
Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.
Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.
Совместимость
13. X[href^=»http»]
Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.
Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.
Обратите внимание, что мы не ищем //; он не нужен и не несет ответственности за url’ы, начинающиеся с //.
Теперь, если бы нам было нужно вместо этого определить стиль всем привязкам, которые ссылаются на, скажем, фотографию? В этом случае давайте поищем конец строки.
Совместимость
14. X[href$=».jpg»]
Совместимость
15. X[data-*=»foo»]
Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:
Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?
Затем, при помощи этого готового к работе приема, можно употребить стандартный селектор атрибутов для выделения исключительно нужных привязок.
Совместимость
16. X[foo
А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (
) позволяет выбрать своей целью атрибут со списком значений, разделенным пробелами.
Согласно вышеприведенному пользовательском атрибуту из номера пятнадцать мы могли бы создать атрибут data-info, который может получить разделенный пробелами список чего угодно, что нужно пометить. В этом случае мы отметим внешние ссылки и ссылки на изображения — просто для примера.
При помощи готовой к работе разметки мы теперь можем выбрать любые тэги с любыми из этих значений, используя прием селектора атрибутов
Совместимость
17. X:checked
Этот псевдокласс выберет только проверенный элемент пользовательского интерфейса – как кнопка радио или checkbox (прямоугольник для пометки выбранного режима, состояния или действия (на экране дисплея)). Просто, как дважды два.
Совместимость
18. X:after
Псевдоэлементы before и after соединяют все. Кажется, каждый день находятся новые творческие приемы их эффективного использования. Они просто формируют содержимое вокруг выбранного элемента.
Многие познакомились с этими классами при первой встрече с хаком clear-fix.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Этот хак использует псевдоэлемент :after для присоединения пробела после элемента, а затем его очистки. Этот великолепный прием стоит иметь в своем инструментарии, особенно в тех случаях, когда невозможно использовать метод overflow: hidden;.
Совместимость
19. X:hover
Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!
Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.
Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.
Совместимость
20. X:not(selector)
Псевдокласс отрицания чрезвычайно полезен. Скажем, я хочу выбрать все div’ы, кроме одного, который является id container. Фрагмент выше выполнит эту работу идеально.
Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:
Совместимость
21. X::pseudoElement
Можно использовать псевдоэлементы (назначенные ::) для назначения стилей фрагментам элемента, таким, как первая строка или первая буква. Помните о том, что для того, чтобы оказать эффект, они должны быть применены для блочных элементов.
Псевдоэлемент состоит из двух двоеточий: ::
Выберите первую букву абзаца
Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.
Чаще всего оно используется для создания «газетных» стилей для первой буквы абзаца.
Подобным образом псевдоэлемент ::first-line, как от него и ожидается, назначит стили только первой строке элемента.
«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник
Совместимость
22. X:nth-child(n)
Помните время, когда у нас не имелось возможности выделять отдельные элементы в стеке? Псевдокласс nth-child решает эту проблему!
Пожалуйста, обратите внимание, что nth-child принимает в качестве параметра целое число, однако, оно не начинается с нуля. Если хотите выбрать второй пункт списка, пользуйтесь li:nth-child(2).
Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.
Совместимость
23. X:nth-last-child(n)
Что получится, если бы у вас был огромный список пунктов в ul, и вам нужно было всего лишь обратиться, скажем, к третьему от конца пункту? Помимо выполнения li:nth-child(397), вы могли бы вместо этого применить псевдокласс nth-last-child.
Эта техника работает почти так же, как вышеуказанный номер шестнадцать, тем не менее, разница состоит в том, что она начинается с конца совокупности и работает в обратную сторону.
Совместимость
24. X:nth-of-type(n)
Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.
Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.
Совместимость
25. X:nth-last-of-type(n)
Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.
Совместимость
26. X:first-child
Этот структурный псевдокласс позволяет нам выбрать только первый дочерний элемент своего родителя. Вы его будете часто использовать для удаления рамок с первого и последнего пунктов списка.
Например, скажем, у вас есть список строк, и каждый из них содержит border-top и border-bottom. При таком размещении первый и последний пункт в этом наборе будут выглядеть немного странно.
Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.
Совместимость
27. X:last-child
В противоположность first-child, last-child выделит последний пункт родителя элемента.
Пример
Давайте построим простой пример для демонстрации одного из возможных способов использования этих классов. Создадим элемент списка, имеющий стили.
Разметка
Здесь нет ничего особенного; всего лишь простой список.
Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.
Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.
Как видно на изображении вверху, единственная проблема состоит в том, что рамка будет применяться к самому верху и низу неупорядоченного списка – это выглядит странно. Давайте для устранения этой проблемы используем псевдоклассы :first-child и :last-child.
Вот так; все исправлено!
Совместимость
28. X:only-child
Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.
Он позволяет выбирать элементы, являющиеся единственным дочерним у родителя. Например, касаемо фрагмента вверху, красным цветом будет окрашен только абзац, который является единственным дочерним элементом div’а.
Давайте представим следующую разметку.
Two paragraphs total.
Two paragraphs total.
В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.
Совместимость
29. X:only-of-type
Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.
Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.
Совместимость
30. X:first-of-type
Псевдокласс first-of-type позволяет выбирать первые сиблинги (элементы одного уровня) своего типа.
Проверка
Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:
Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.
Решение 1
Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.
Этот отрывок, по сути, говорит: «Найдите первый неупорядоченный список на странице, затем найдите только прямые дочерние элементы, являющиеся пунктами списка. Далее отфильтруйте все до второго пункта списка в наборе».
Решение 2
Второй возможный вариант будет использовать смежный селектор.
В этом сценарии мы находим ul, непосредственно следующий за тэгом p, а затем найдем самый последний его дочерний элемент.
Решение 3
Можно вредить им или играть с этими селекторами, как угодно.
На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!
Совместимость
Заключение
Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.
Во-вторых, при работе с библиотеками JavaScript, вроде популярного jQuery, всегда, где это возможно, старайтесь отдавать предпочтение использованию «родных» селекторов CSS3 перед пользовательскими методами/селекторами библиотеки. Ваш код от этого станет выполняться быстрее, так как движок селекторов может использовать исконный парсинг браузера охотнее, чем свой собственный.
Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!
Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Что вы не знали о селекторах CSS?
CSS Selectors
Объясняю многие селекторы применимо к указанному примеру.
.class
Выбирает, объединяет все элементы
element
(Пр. p ) Объединяет все элементы тега p.
element,element
(Пр. div,p) Объединяет все элементы div и все элементы p
.
Так же в эту группу можно выделить похожие селекторы:
element element
(Пр. div p) Выбирает все элементы p внутри div.
element>element
(Пр. div>p) Объединяет все p для которых родителем выступает div.
element+element
(Пр. div+p) Объединяет все p которые расположены сразу после div.
[attribute]
(Пр. [target]) Объединяет все элементы с атрибутом target
[attribute=value]
(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»
[attribute
=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»
[attribute|=value]
(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»
Все теги написаны были без «<>«.
Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач — от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом.
Так же их называют Псевдокласы:
:visited
:active
:hover
:focus
:first-letter
:first-line
:first-child
:before
:after
:lang(language)
(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»
Селекторы CSS3
Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.
element1
ul)
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
— в этом случае ничего не произойдет, а в
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.
[attribute^=value]
(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.
[attribute$=value]
(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.
[attribute*=value]
(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
В этом примере результатом будут закрашенные строки item1, item3, item4.
Дальше перейдем к псевдоклассам
:first-of-type
:last-of-type
:only-of-type
:only-child
(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя
Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):
:nth-child(n)
, который является вторым дочерним элементом у родителя.
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child
(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.
Также стоит выделить:
:empty
:target
:enabled
:disabled
:checked
:not(selector)
(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.
Типы значений в CSS. Абсолютные, относительные и всякие другие
Разберёмся, какие бывают типы значений у CSS-свойств, и определим, чем отличаются абсолютные и относительные значения свойств (все эти em, rem, vh, vw), как задаются цвета, и зачем нужны CSS-директивы.
Эта статья — часть учебника из курса профессиональной вёрстке сайтов от HTML Academy.
Абсолютные значения
Самый простой тип значений — абсолютные. Например, значения в пикселях. Они могут задавать размеры элементов, размеры текста и так далее.
Абсолютные значения хороши тем, что это итоговые значения, понятные и легко представимые. Этот как расстояние в метрах. Если до магазина 100 метров, то это близко, а если 10 000 метров, то это далековато. Чего не скажешь про относительные значения.
Интерактивные тренажёры по теме:
Относительные значения
— В два раза дальше, чем в прошлый раз!
Такое значение сразу и не представишь: сначала нужно узнать, какое расстояние было в прошлый раз, потом перемножить на два, получить итоговое расстояние и только потом делать выводы.
Поэтому относительные значения — это более сложный тип. Эти значения, в отличие от абсолютных, не являются конечными или итоговыми, а зависят от других значений. Например, ширина элемента, заданная в процентах, зависит от ширины родительского элемента. Браузер вычисляет ширину такого элемента, умножая ширину родителя на значение в процентах, и получает абсолютное значение в пикселях. Надо сказать, что при отрисовке страницы все относительные значения в итоге превращаются в абсолютные, иначе страницу просто не отрисовать.
Проценты ведут себя достаточно сложно и вычисляются по-разному в зависимости от того, в каком свойстве используются. Например:
если задать ширину в процентах, она вычисляется от ширины родителя,
если задать размер шрифта в процентах, он вычисляется от размера шрифта родителя,
если задать вертикальный внутренний отступ в процентах, он вычисляется от ширины родителя (а не от его высоты).
Помимо процентов есть и другие относительные единицы измерения.
Единицы vh и vw задают зависимость от размеров вьюпорта (видимой области окна браузера). Единица vh зависит от высоты вьюпорта и часто применяется, когда нужно делать полноэкранные секции. Единица vw задаёт зависимость от ширины вьюпорта и применяется намного реже.
Работа с относительными значениями — это частая прикладная задача, которую используют все. Но стоит помнить, при неумелом использовании относительные единицы измерения усложняют код и делают его поддержку более дорогой.
Дополнительные материалы
Значения с ключевыми словами
Следующий тип значений — ключевые слова. Они несложные, их нужно просто постепенно запоминать.
Как задаются цвета
Ещё один особый тип значений — цвета, которые встречаются сразу в нескольких вариантах.
50 оттенков одного и того же цвета
В формате rgba в скобках появляется четвёртая часть, которая принимает значение от нуля до единицы и задаёт степень непрозрачности цвета. При нуле цвет полностью прозрачен (или непрозрачен на 0%), при единице цвет полностью непрозрачен.
Так как rgba — это цветовое значение, оно может быть задано любым свойствам, которые принимают цвет (цвет рамки, цвет фона, цвет текста и так далее). И этот цвет вы можете сделать полупрозрачным. Эр-Джи-Би-Эй — полупрозрачная рамка ещё никогда не делалась так просто!
Форматы hsl и hsla похожи на rgb и rgba и они привычны для дизайнеров-полиграфистов. И ещё цвета можно задавать с помощью ключевых слов.
Значения-функции
С помощью calc можно добиваться очень сложного поведения. Например, вычислять размер элемента, используя разные единицы измерения: «ширина 200px плюс 10em».
Функция attr используется намного реже.
Значения в виде произвольных строк
И последний на сегодня тип значений — произвольные строки. Обычно это названия шрифтов или значение свойства content.
Однако content — это свойство, которое работает только у псевдоэлементов. Псевдоэлементы чаще всего используются для создания декоративных эффектов, в которых текстовое содержание не нужно, поэтому для content задаётся пустая строка.
CSS-директивы
На этом сегодня всё. Подпишитесь на нас на Хабре, чтобы не пропустить другие полезные шпаргалки по веб-разработке. И помните, что промокод SKUCHNO даёт скидку 1000 ₽ на все профессиональные курсы HTML Academy. Один из них — курс по профессиональной вёрстке сайтов, который недавно сильно обновился.