CSS selectors

CSS

Каскадные таблицы стилей (CSS) используются для описания внешнего вида документа, написанного языком разметки

Объявление стиля состоит из двух частей:

• селектора
• блока объявления, заключенного в фигурные скобки

В блоке объявления перечисляются пары: имя атрибута: значение атрибута:

color: blue;

здесь - имя атрибута, blue - значение

значение отделяется от имени двоеточием

каждая пара атрибут: значение заканчивается точкой с запятой

^{В примере выше атрибут color определяет цвет текста элемента}

---

Определим стиль всех заголовков h2 на странице:

h2 {
    font-size: 28px;
    line-height: 32px;
}

^{Здесь установлен размер шрифта ( font-size ) и высота строки ( line-height ) для заголовков h2}

---

Способы подключения стилей

внешняя таблица стилей

^{подлинковывается к странице тегом <link>}

^{Атрибут rel="stylesheet" указывать обязательно}

<link media="all" rel="stylesheet" href="css/main.css">

внутренние таблицы стилей

^{Вставляются на страницу тегом <style>}

<style>
    h2 {
        font-size: 28px;
        line-height: 32px;
    }
</style>

встроенные (инлайновые) стили

^{Добавляются элементу с помощью атрибута style}

<h2 style="font-size: 32px;">Heading 2</h2>

---

Селекторы

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

Селекторы могут быть:

• теговыми
• классовыми
• идентификаторными
• контекстными
• селекторами псевдоклассов и псевдоэлементов
• атрибутивными
• дочерними
• соседскими
• родственными

пример

<nav class="main-menu">
    <a href="#">About</a>
    <a href="#">Team</a>
    <a href="#">Contacts</a>
</nav>

.main-menu {
   background-color: black;
   font-family: Arial;
   font-size: 16px;
}
.main-menu a {
   text-decoration: none;
   color: white;
}

^{Здесь для элемента с классом main-menu установлен цвет фона ( background-color: black ), шрифт ( font-family: Arial ) и размер шрифта ( font-size: 16px )}

^{Для дочерних элементов <a> элемента с классом main-menu отменяется подчеркивание текста ( text-decoration: none ) и устанавливается цвет текста ( color: white ) и размер шрифта ( font-size )}

---

Общие селекторы

• теговый селектор - позволяет задавать стили для всеx элементов данного типа

h1 {
    font-family: Arial;
    font-size: 18px;
    color: darkblue;
}

• селектор класса - указывает на все элементы с заданным именем класса

.main-menu {
    display: inline-block;
    background-color: black;
    padding: 5px 10px;
    color: white;
}

• идентификаторный селектор - позволяет задавать стили для элемента с уникальным id

#container {
    width: 100%;
    height: 300px;
    overflow: auto;
    box-sizing: border-box;
}

• селектор потомка - указывает на элементы, расположенные внутри элемента-контейнера

.main-menu a {
    border: solid 1px gray;
}

^{здесь устанавливается сплошная серая рамка ( border ) толщиной 1px для всех элементов <a>, находящихся внутри элементов с классом main-menu на любом уровне вложенности}

пример

<div class="wrap">
    
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    
    <form>
        <h3>Form heading</h3>
        <p>lorem ipsum</p>
        <p>lorem ipsum</p>
        <input type="text">
        <input type="submit" value="Submit">        
    </form>

</div>

• дочерний селектор - позволяет задавать стили к элементам, которые являются прямыми потомками ( т.е. расположены непосредственно в родительском элементе, а не внутри других элементов, которые находятся в родителе )

.wrapper {
    background-color: black;
}
article > h3 { color: yellow; }
.wrapper p { color: gray; }
.wrapper > p { color: red; }

<section class="wrapper">
    <p>Hello!</p>
    <article>
       <h3>Grid Layout</h3>
       <p>The CSS Grid Layout Module offers a grid-based layout system, 
       with rows and columns, making it easier to design web pages 
       without having to use floats and positioning</p>
    </article>
    <p>Read more...</p>
</section>

^{Здесь текст Hello! и Read more... будет красным, а внутри элемента <article> текст будет серым, а заголовок - желтым}

---

• сестринский селектор позволяет задавать стили к элементам, имеющим общего родителя

h3 + p {
    font-size: 28px;
}



h3 ~ p {
    font-size: 28px;
}

• селектор атрибута - позволяет задавать стили к элементам на основе имени атрибута или значения атрибута;

input[type=”text”] {
    font-size: 28px;
}

---

🎓 Псевдоклассы

Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они позволяют применить CSS-правила к элементам при совершении события или подчиняющимся определенному правилу. Примеры псевдоклассов:

• :link — не посещенная ссылка;

• :visited — посещенная ссылка;

• :hover — любой элемент, по которому проводят курсором мыши;

• :focus — интерактивный элемент, к которому перешли с помощью клавиатуры или активировали посредством мыши;

• :disabled — заблокированные поля форм, т.е., находящиеся в неактивном состоянии;

• :not(селектор) — элементы, которые не содержат указанный селектор — класс, идентификатор, название или тип поля формы — :not([type="submit"]);

• :checked — выделенные (выбранные пользователем) элементы формы.

---

🎓 Структурные псевдоклассы

  Структурные псевдоклассы отбирают дочерние элементы в соответствии с параметром.

• :nth-child(odd) — нечётные дочерние элементы;

• :nth-child(even) — чётные дочерние элементы;

• :nth-child(3n) — каждый третий элемент среди дочерних;

• :nth-child(n+2) — выбирает все элементы, начиная со второго;

• :nth-child(3) — выбирает третий дочерний элемент;

• :first-child — позволяет оформить только самый первый дочерний элемент тега;

• :last-child — позволяет форматировать последний дочерний элемент тега;

• :only-child — выбирает элемент, являющийся единственным дочерним элементом;

• :empty — выбирает элементы, у которых нет дочерних элементов;

 

🎓 Структурные псевдоэлементы

 

• ::first-letter — выбирает первую букву каждого абзаца;

• ::first-line — выбирает первую строку текста элемента;

• ::before — вставляет генерируемое содержимое перед элементом;

• ::after — добавляет генерируемое содержимое после элемента.

 

p::before {
    content: 'read-this';
    display: block;
} 

---

🎓 Комбинирование и группировка селекторов

Для более точного отбора элементов для форматирования можно использовать комбинации селекторов:

a[href][title] {
    color: red;
}

Один и тот же стиль можно одновременно применить к нескольким элементам. Для этого необходимо в левой части объявления перечислить через запятую нужные селекторы:

p,
span {
    color: black;
}

---

🎓 Наследование

Наследование - механизм, с помощью которого определенные свойства передаются от предка (родителя) к его потомкам. Наследуются свойства, относящихся к текстовому содержимому страницы, таких как color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform...  

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

*** 

🎓 Каскад (”вес” селекторов)

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

• правило !important (самый сильный приоритет):

h3 {
   font-size: 20px !important;
}

• специфичность (”вес” селектора):

/* tag name - 1 */
p {
   font-size: 20px;  
}

/* class - 10 */
.content {
   font-size: 22px;  
}

/* id - 100 */
#content {
   font-size: 24px;  
}

• порядок:

p {
   font-size: 20px;  
}

p {
   font-size: 22px;  
}