Основные селекторы

Эта памятка охватывает основные селекторы и их использование в CSS. Надеюсь, она будет полезна для редактирования стилей!

1. Селектор элемента (Type Selector)

   p {
       color: blue;
   }
   

   Применяет стили ко всем элементам указанного типа (например, все <p>).

2. Селектор класса (Class Selector)

   .classname {
       color: red;
   }
   

   Применяет стили ко всем элементам с указанным классом.

3. Селектор идентификатора (ID Selector)

   #idname {
       color: green;
   }
   

   Применяет стили к элементу с указанным идентификатором.

4. Универсальный селектор (Universal Selector)

   * {
       margin: 0;
       padding: 0;
   }
   

   Применяет стили ко всем элементам.

5. Селектор атрибута (Attribute Selector)

   [type="text"] {
       border: 1px solid black;
   }
   

   Применяет стили к элементам с указанным атрибутом.

Комбинированные селекторы

1. Селектор потомков (Descendant Selector)

   div p {
       color: purple;
   }
   

   Применяет стили ко всем <p>, которые являются потомками <div>.

2. Селектор дочерних элементов (Child Selector)

   ul > li {
       list-style-type: none;
   }
   

   Применяет стили ко всем <li>, которые являются непосредственными дочерними элементами <ul>.

3. Смежный селектор (Adjacent Sibling Selector)

   h1 + p {
       margin-top: 0;
   }
   

   Применяет стили к элементу <p>, который следует сразу за <h1>.

4. Общий селектор соседей (General Sibling Selector)

   h1 ~ p {
       color: orange;
   }
   

   Применяет стили ко всем элементам <p>, которые являются соседями <h1>.

Псевдоклассы и псевдоэлементы

1. Псевдокласс (Pseudo-class)

   a:hover {
       color: pink;
   }
   

   Применяет стили к элементу в определенном состоянии (например, при наведении курсора).

2. Псевдоэлемент (Pseudo-element)

   p::first-line {
       font-weight: bold;
   }
   

   Применяет стили к определенной части элемента (например, к первой строке текста).

Группировка селекторов

1. Группировка селекторов (Grouping Selector)

   h1, h2, h3 {
       color: navy;
   }
   

   Применяет одинаковые стили к нескольким элементам.