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

Селектори

Селекторът е шаблон, който се използва за избиране на HTML елементи, които искате да стилизирате. След като бъдат избрани, можете да приложите различни правила за стилизиране (като цвят, размер на шрифта, фон и т.н.) към тези елементи. Селекторите са основна концепция в CSS, тъй като позволяват точно да определите кои елементи да бъдат засегнати от вашите стилове.

Type Selector

Type Selector - Селекторът за тип (известен още като селектор за елемент) избира всички елементи от даден тип. Например, ако искате да зададете стил на всички абзаци, всички div елементи или всички тагове за заглавия, бихте използвали селектора за тип.

p {
    color: red;
}

Class Selector

Class Selector - Селекторът за клас се прилага към елементи, които имат определен атрибут за клас. Класовете се използват за многократна употреба, което означава, че няколко елемента могат да споделят един и същ клас.

За да използвате селектор за клас, поставяте точка (.) пред името на класа:

.my-class {
    background-color: lightblue;
}

ID Selector

ID Selector - Идентификационният селекторът се прилага към елемент, който има конкретен атрибут id. За разлика от класовете, ID трябва да бъде уникален в рамките на страницата, което означава, че само един елемент трябва да използва конкретен ID.

За да използвате ID селектор, поставяте символа за диез (#) пред името на ID-то:

#header {
    font-size: 24px;
}

Universal Selector

Universal Selector - Универсалният селектор е насочен към всички елементи на страницата. Той е представен със звездичка (*).

* {
    margin: 0;
    padding: 0;
}

Attribute Selector

Attribute Selector - Атрибутен селектор ви позволява да задавате елементи въз основа на наличието или стойността на конкретен атрибут.

Например, за да изберете всички елементи с атрибута type="text":

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

Descendant Selector

Descendant Selector - Наследствен селектор ви позволява да изберете елемент, който е вложен в друг елемент. Той се записва като два селектора, разделени с интервал.

div p {
    color: green;
}

Това правило е насочено към всички <p> елементи, които са вътре в <div>.

Child Selector

Child Selector - Дъщерният селектор е подобен на наследствения селектор, но е по-специфичен. Той е насочен само към директни деца на даден елемент. Изписва се със символа (>). Директни наследници означава, че те не са вложени в друг елемент.

div > p {
    color: orange;
}

Adjacent Sibling Selector

Adjacent Sibling Selector - Селекторът на съседния брат е насочен към елемент, който е непосредствено предшестван от друг елемент. Той се пише със знак (+).

h1 + p {
    color: purple;
}

Това правило е насочено към първия <p> елемент, който идва директно след <h1>.

General Sibling Selector

General Sibling Selector - Общият селектор на братя е насочен към всички елементи, които са братя на даден елемент. Изписва се с тилда (~).

h1 ~ p {
    color: brown;
}

Това правило е насочено към всички <p> елементи, които са братя на <h1>.

Стилизиране въз основа на състояние

Псевдокласове селектори

Pseudo-Class Selectors - Псевдокласовете селектори ви позволяват да избирате елементи въз основа на тяхното състояние или позиция. Често срещани псевдокласове включват:

:hover - Насочва се към елемент, когато потребителят задържи курсора на мишката върху него.
:nth-child(n) - Насочва се към елемент въз основа на позицията му в родителски елемент.
:focus - Насочва се към елемент, когато е фокусиран (напр. щракване върху поле за въвеждане на формуляр).

Пример за псевдоклас hover

button:hover {
    background-color: lightgray;
}

Pseudo-element selectors

Pseudo-element selector - Псевдоелементите селектори са насочени към специфични части от елемент. Често срещани псевдоелементи включват:

::before - Вмъква съдържание преди елемент.
::after - Вмъква съдържание след елемент.

Пример за използване на ::before за добавяне на съдържание

h1::before {
    content: "Hellooo ";
}

Каскадност

Каскадност в CSS се отнася до процеса, чрез който браузърът определя кои стилови правила да приложи, когато към един и същ елемент са насочени множество правила. Терминът каскадност подчертава как CSS прилага йерархия от правила, при която определени правила имат предимство пред други въз основа на установени принципи. [3]

Как работи каскадността

CSS правилата могат да идват от различни източници: стилове, дефинирани от потребителя; стилове по подразбиране на браузъра; както и персонализирани стилове от самия уебсайт. Процесът на каскадност определя кой от тези стилове се прилага, когато възникне конфликт помежду им.

Ето как работи това:

Специфичност - CSS правилата с по-специфични селектори имат предимство пред тези с по-ниска специфичност. Например, селекторът за ID (#header) е по-специфичен от селектора за клас (.header), поради което ще има приоритет, ако и двата се прилагат към един и същ елемент.

Важност - Стиловете, обозначени с !important, имат предимство пред всички останали, дори ако са по-малко специфични. Прекомерната употреба на !important обаче може да създаде трудности при поддръжката на кода, затова трябва да се избягва, освен ако не е абсолютно наложително.
Ред на дефиниране - Когато две правила имат еднаква специфичност и важност, от значение е редът, в който са дефинирани. Правилото, което се появява по-късно (по-надолу в CSS файла или в по-късен <style> блок), ще има предимство пред по-ранното.

Каскаден ред

Ето опростено представяне на йерархията на приоритетите (от най-висок към най-нисък):

!important - Най-висок приоритет, независимо от източника.
Вградени (inline) стилове - Следващи по приоритет, освен ако не бъдат пренаписани от !important.
Вътрешен (internal) CSS - Стилове в рамките на таг <style>, които се прилагат само за съответния документ.
Външен (external) CSS - Стилове от външни CSS файлове, свързани с HTML документа, които се прилагат глобално за множество страници.
Стилове на браузъра/потребителя - Стойности по подразбиране или предпочитания, зададени от потребителя.

Специфичност

Специфичността в CSS играе огромна роля в каскадността. Тя представлява мярка за това доколко специфичен е даден селектор и помага да се определи кое правило се прилага, когато към един и същ елемент се отнасят няколко правила.

Специфичността в CSS се изчислява чрез точкова система, базирана на видовете селектори, използвани в правилото:

Вградени (inline) стилове - 1000 точки.
ID селектор - 100 точки.
Класове, атрибути и псевдокласове - 10 точки.
Тагове и псевдоелементи - 1 точка.

/* Less specific */
div {
    color: blue;
}

/* More specific */
#header {
    color: green;
}

/* Most specific */
#header .title {
    color: red;
}

Правило на презаписването

Презаписването в CSS възниква, когато към един и същ елемент се прилагат няколко стила и единият от тях надделява над останалите. Обикновено се прилага най-специфичният стил или този, който е дефиниран последен в кода.

p {
    color: green;
    /* Least specific - applies to all <p> elements */
}
.special {
    color: blue;
    /* More specific - applies to elements with class "special" */
}
#unique {
    color: red;
    /* Most specific - applies to element with ID "unique" */
}

Наследяване

CSS наследяването се отнася до това какво се случва, когато за дадено свойство на елемент не е зададена стойност. [4]

Ако за свойство не е посочена стойност, тя може или да бъде наследена от родителския елемент, или да бъде зададена като начална (по подразбиране).

По отношение на CSS наследяването свойствата се разделят на два вида:

Наследяеми свойства
Ненаследяеми свойства

Наследяеми свойства

По подразбиране наследяваните свойства приемат стойност от родителския елемент.

Свойствата, свързани с текста – като цвят (color), шрифт (font-family), размер на шрифта (font-size), височина на реда (line-height) и подравняване на текста (text-align) – обикновено се наследяват. Това гарантира единен стил на текста в целия документ.

В следващия пример текстът в елемента <strong> ще се покаже със син цвят и размер 20px, тъй като елементът <strong> наследява стойностите за цвят и размер на шрифта от родителския елемент (<p>).

Code

<style>
  p {
          color: blue;
          font-size: 20px;
  }
</style>

<body>
  <p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

Preview

Ненаследяеми свойства

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

Свойствата, свързани с модела на кутията (box model) или с оформлението (layout) – като рамка (border), фон (background), margin, padding, ширина (width) и височина (height) – обикновено не се наследяват.

В следващия пример елементът <strong>, разположен вътре в елемента <p>, няма да има допълнителна рамка (тъй като началната стойност на border-style е none).

Code

<style>
  p {
          border: 1px solid red;
  }
</style>

<body>
  <p>This is a paragraph with some <strong>important</strong> text.</p>
</body>

Preview

inherit

Ключовата дума inherit се използва за изрично задаване на наследяване. Тя работи както за наследяеми, така и за ненаследяеми свойства.

В следващия пример елементът <strong>, намиращ се вътре в елемента <p>, ще има допълнителна рамка, тъй като сме използвали ключовата дума inherit, за да укажем изрично, че стойността на рамката трябва да бъде наследена.

Code

<style>
  p {
          border: 1px solid red;
  }

  strong {
          border: inherit;
  }
</style>

<body>
  <p>This is a paragraph with some <strong>strong</strong> text.</p>
</body>

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