Селектор §

Селектор - это элемент CSS-правила, который определяет, на какой именно элемент HTML будет применяться данный стиль.

Существует несколько типов селекторов в CSS:

1. Типовой селектор: выбирает все элементы определенного типа. Например, селектор p выбирает все элементы p на веб-странице.

p {
  color: blue;
}

2. Селектор класса: выбирает все элементы, которые имеют определенный класс. Классы определяются с помощью атрибута class в HTML-коде. Например, селектор .red-text выбирает все элементы с классом red-text.

.red-text {
  color: red;
}

3. Идентификаторный селектор: выбирает единственный элемент, который имеет определенный идентификатор. Идентификаторы определяются с помощью атрибута id в HTML-коде. Например, селектор #header выбирает единственный элемент с идентификатором header.

#header {
  font-size: 24px;
}

4. Селектор атрибута: выбирает все элементы, которые имеют определенное значение атрибута. Например, селектор [href="https://www.google.com"] выбирает все элементы с атрибутом href, значение которого равно https://www.google.com.

a[href="https://www.google.com"] {
  color: green;
}

5. Селектор потомков: выбирает все элементы, которые являются потомками определенного элемента. Например, селектор ul li выбирает все элементы li, которые являются потомками элемента ul.

ul li {
  list-style-type: circle;
}

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

Селектор-комбинатор §

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

В CSS существует несколько типов селекторов комбинаторов:

1. Селектор потомков: выбирает все элементы, которые являются потомками другого элемента. Селектор потомков записывается через пробел между двумя элементами. Например, селектор ul li выбирает все элементы li, которые являются потомками элемента ul.

ul li {
  color: blue;
}

2. Селектор дочерних элементов: выбирает только те элементы, которые являются прямыми потомками другого элемента. Селектор дочерних элементов записывается через знак > между двумя элементами. Например, селектор ul > li выбирает только те элементы li, которые являются прямыми потомками элемента ul.

ul > li {
  font-weight: bold;
}

3. Селектор соседних элементов: выбирает следующий элемент, который является непосредственным соседом другого элемента. Селектор соседних элементов записывается через знак + между двумя элементами. Например, селектор h1 + p выбирает первый элемент p, который является непосредственным соседом элемента h1.

h1 + p {
  text-transform: uppercase;
}

4. Селектор элементов, которые идут после других элементов: выбирает все элементы, которые следуют после других элементов. Селектор элементов, которые идут после других элементов, записывается через знак ~ между двумя элементами. Например, селектор h2 ~ p выбирает все элементы p, которые идут после элемента h2.

h2 ~ p {
  font-style: italic;
}

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

Назад