Типы селекторов CSS | Кодементор • Wonz

Селекторы указывают на элемент HTML, для которого вы хотите установить стиль. Селектор — это техника, позволяющая придать любой стиль вашему тексту на HTML-странице. Существует 4 типа селекторов CSS, используемых в HTML для указания элемента.

1.Универсальный селектор
2. Выбор типа элемента
3. Селектор идентификаторов
4. Выбор класса

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

Универсальный селектор

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

* {
   color: white;
   font-size: 12px;
}

Выбор типа элемента

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

. Посмотрите на следующий пример CSS.

ul {
   list-style: none;
   border: solid 1px #CCC;
}

p {
   color: gray;
   font-size: 16px;
}

Этот селектор элементов CSS использует элемент HTML, такой как

<ul>
  <li>one</li>
  <li>Two</li>
  <li>Three</li>
  <li>Foure</li>
</ul>

<p>Example paragraph text.</p>

Селектор идентификаторов

Этот селектор объявляется с помощью решётки или символа решетки (#), предшествующего строке символов. Строка символов определяется разработчиком.

Этот селектор соответствует любому элементу HTML, который имеет атрибут ID с тем же значением, что и у селектора. Посмотрите на следующий пример CSS, в котором используется селектор ID.

#main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

Этот CSS-селектор ID использует элемент HTML, например:

<div id="main">Hello World!</div>

Выбор класса

Селектор класса — самый полезный из всех селекторов CSS. Он объявляется точкой перед строкой из одного или нескольких символов. Как и в случае с селектором ID, эта строка символов определяется разработчиком.

Посмотрите на следующий пример CSS, в котором используется селектор класса:

.main{
   width: 90%;
   margin: 0px;
   color: gray;
   font-size: 16px;
}

Этот CSS-селектор класса использует элемент HTML, например:

<div class="main">Hello World!</div>

Вывод

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