Полезные CSS селекторы

  • 14 апреля, 16:10
  • 3884
  • 0

Селекторы CSS - это набор правил, которые позволят нам стилизовать любой элемент HTML. В CSS есть много различных селекторов, рассмотрим парочку.

Полезные CSS селекторы

Глобальный или универсальный селектор

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

* { margin : 0; }

Универсальный селектор отмечен звездочкой (*). Несмотря на свою простоту, он не используется, поскольку трудно применить один и тот же стиль ко всем элементам страницы. Но обычно он сочетается с другими селекторами.

Тип элемента или селектор метки

Этот селектор принимает все элементы страницы, чей HTML-тег соответствует значению селектора. В следующем примере выбираются все <h1> страницы:

h1 {
  ...
}

Чтобы использовать этот селектор, нужно только ввести имя тега HTML (без символов « < > »), соответствующие выбранным элементам.

В следующем примере применяются разные стили к заголовкам HTML-страницы:

h1 {
  font-size: 32px;
}
h2 {
  color: coral ;
}
h3 {
  color: black;
  opacity : 0.8;
}

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

h2, h3, h4 {
  color: balck ;
  font-weight: Bold ;
  opacity: 0.7;
  font-family: Arial, Helvetica, sans-serif;
}

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

h2 {font -size: 25px ; }
h3 {font -size: 20px ; }
h4 { font -size : 15px ; }

Нисходящий селектор

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

Селектор в следующем примере выбирает все элементы <span> страницы, которые находятся внутри элемента <nav>:

<nav>
   <span> txt1 </span>   
   <a href ="...">
     <span> txt2 </span> 
   </ a >
 </nav>

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

Остальные элементы <span> страницы, которые не входят в элемент <nav>, не применяют вышеуказанное правило CSS.

Селекторы по убыванию позволяют повысить точность селектора типа или метки. Таким образом, используя нисходящий селектор, можно применять разные стили к элементам одного типа. Следующий пример расширяет предыдущий образец цвета и акцентирует весь текст <a>, содержащийся в <span>:

span a {color : black ; text-decoration: none;   }

С вышеуказанными правилами CSS:

  1. Элементы < a > найденный внутри элемента <span> показан черным цветом и выделен.
  2. Остальные элементы < a > страницы отображаются с цветом по умолчанию, примененным браузером.
  3. Нисходящие селекторы всегда образованы двумя или более селекторами, отделенными друг от друга пробелами. 
  4. Последний селектор указывает элемент, к которому применяются стили, а предыдущий селектор указывает место, где находится элемент.

Выбор класса

Рассматрим следующий пример HTML-кода:

<body> 
   <h1> Lorem ipsum pain </h1>
   <h1> Lorem ipsum pain </h1>
   <h1> Lorem ipsum pain </h1>
</body> 

Как стили CSS могут применяться только к первому h1? Универсальный селектор (*) не может быть использован, потому что он выбирает все элементы страницы. Селектор типа элемента или метки (h1) также нельзя использовать, потому что он будет выбирать все абзацы. Наконец, нельзя использовать и нисходящий селектор (body h1), потому что все абзацы находятся в одном месте.

Одним из самых простых решений для применения стилей к одному элементу является «атрибут класса»:

<body>
    <h1 class = ”title 1” > Lorem ipsum pain <h1>
    <h1> Lorem ipsum pain </h1>
    <h1> Lorem ipsum pain </h1>
 </ body >

Затем в файле CSS создается новое правило под названием «title1» со всеми стилями, применяемыми к элементу. Чтобы браузер не путал этот селектор с другими типами селекторов, значение установлено с точкой (.) Как показано в следующем примере:

. title 1 { text-transform : uppercase ; }

Селектор . title 1 интерпретируется как «любой элемент страницы, атрибут класса которого равен title1», так что только первый заголовок подходит этому условию.

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

Селекторы ID

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

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

Синтаксис идентификаторов селекторов очень похож на синтаксис селекторов классов, за исключением того, что символ ( # ) используется вместо точки (.) в качестве префикса имени правила CSS:

# main-title {text-transform: uppercase; }
<body> 
    <h1 id = " main -title " > Lorem ipsum pain <h1> 
    <h1> Lorem ipsum pain </h1>
    <h1> Lorem ipsum pain </h1>
</body>

В предыдущем примере # селектор основного заголовка выбирает только первый

<h1> (whose id attribute is equal to “ main-title ” ).

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

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


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