CSS selectors

🎓 CSS

Каскадные таблицы стилей (css) используются для описания внешнего вида документа, написанного языком разметки. Объявление стиля состоит из двух частей: элемента веб-страницы — селектора, и команды форматирования — блока объявления.

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

---

Способы задания стилей:

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

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

внутренние стили:

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

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

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

🎓 Селекторы

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

🏴 пример html

<ul class="main-nav" id="nav">
    <li><a href="#">About us</a></li>
    <li><a href="#">Team</a></li>
    <li><a href="#">Fotos</a></li>
</ul>

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

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

ul {
    background-color: black;
}

• селектор класса - позволяет задавать стили для одного и более элементов с одинаковым именем класса, размещенных в разных местах страницы;

.main-nav {
    background-color: black;
}

• селектор идентификатора - позволяет задавать стили для конкретного элемента (id должен быть уникальным!);

#id-nav {
    background-color: black;
}

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

.main-nav a {
    background-color: black;
}

🏴 пример html

<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>

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

.wrap > p {
    font-size: 28px;
}

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

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;  
}