Какво са псевдо-класовете

Определят състояние на елемент.

Селектират целият елемент (за разлика от pseudo-elemements селекторите), но само когато елементът е в даденото състояние.

Например :hover, определя елемент, когато е посочен от мишката.

:first-child определя елемент, само когато е първият елемент в родителя си.

Hyperlinks Pseudo Classes - Пример

See the Pen link_pseudo_clases by Iva Popova (@webdesigncourse) on CodePen.

Употреба

Чрез селекторите за псевдо-класове можем да селектираме елемент според неговото състояние.

Общ синтаксис:

				selector:pseudo­class {
					property:value;
					...
				}
			

:link

Селектира линк, който не е посетен от дадения браузер.

Пример:

				a:link{
					color: green;
				}
			

:visited

Селектира линк, който вече е посетен от дадения браузер.

Пример:

				a:visited{
					color: gray;
				}
			

:visited - important note

От съображения за сигурността на потребителя, върху посетените линкове могат да се прилагат само някои от CSS свойствата

Това са: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill and stroke.

Privacy and the :visited selector

:hover

Селектира елемент, когато мишката се намира върху него.

:hover може да се прилага не само върху хиперлинкове, но и всички останали HTML елементи.

Пример:

				a:hover{
					border-bottom: 1px dotted #000;
				}
			

:hover - кога няма да работи?

Редът на записване на стилове за линкове има значение!

За да се приложат правилно свойствата, трябва да подреждате CSS правилата за линкове, спазвайки следния ред:

:link , :visited , :hover , :active

:hover - кога няма да работи? - пример

See the Pen hover not working on <a&rt; by Iva Popova (@webdesigncourse) on CodePen.

:hover и CSS комбинатори- примери

See the Pen hoverExamples by Iva Popova (@webdesigncourse) on CodePen.

:hover - приложение

Pure CSS drop-down menu

:active

Селектира елемент, когато щракнем с мишката върху елемента.

Пример:

				a:active{
					font-­size: 120%;
				}
			

:focus

Селектира елемент, когато елемента получи фокус.

Прилага се само за елементи, чрез които потребителя може да взаимодейства - такива са input елементите на една форма, линковете, както и всички елементи с атрибут tabindex

Пример:

				a:focus{
					font-weight: bold;
				}
			

:active and tabindex demo

See the Pen active and tabindex demo by Iva Popova (@webdesigncourse) on CodePen.

:nth-child(x)

Селектира поредно дете, с индекс x, без значение на неговия тип.

Индексът на децата започва от 1

x може да бъде число, запазена дума или формула: an+b

Записът :nth-child(x) - се чете елемент/и (какъвто и да е), който е X-то дете

Записът selector:nth-child(x) - се чете елемент/и, селектиран от selector, който е X-то дете

:nth-child(x) - example

See the Pen :nth-child(x) - example by Iva Popova (@webdesigncourse) on CodePen.

:nth-child(an+b)

Когато имаме nth-child(an+b), n е брояч, който започва от нула и се увеличава с 1, автоматично

a и b са числа, които се задават от нас.

Ако an+b < 0, няма да се селектира нито един елемент (няма елемент с индекс -1, например)

Но е възможно да имаме минус пред n.Например:

				/* селектира първите 3 параграфа */
				p:nth-child(-n+3){
					color: magenta;
				}
			

:nth-child(an+b) - example

See the Pen nth-child(an+b) by Iva Popova (@webdesigncourse) on CodePen.

:nth-last-child(x)

За да селектираме елементите в обратен ред (от последния към първия), се използва селектора nth-last-child()

Например:

				/* селектира параграф, ако е последно дете */
				p:nth-last-child(1){
					color: magenta;
				}
			

Self-Learning Section (nth-of-type(an+b)

nth-of-type(an+b) at MDN

:nth-of-type(an+b)

See the Pen :nth-of-type(an+b) by Iva Popova (@webdesigncourse) on CodePen.

Пример 1: nth-child() vs. nth-of-type()

See the Pen nth-child() vs. nth-of-type() by Iva Popova (@webdesigncourse) on CodePen.

Пример 2: nth-child() vs. nth-of-type()

See the Pen nth-child() vs. nth-of-type() 2 by Iva Popova (@webdesigncourse) on CodePen.

Често срещани проблеми: nth-child

:checked

Селектира radio, checkbox или option елемент, когато елемента е избран от потребителя.

Пример:

				/* селектира всички  елементи, когато те са маркирани от потребителя */
				input[type="radio"]:checked{
					width: 50px;
					height: 50px;
				}
			

Същата логика е приложима и за checkbox

:checked при стилизиране на радио-бутони

See the Pen Styling_radio_inputs by Iva Popova (@webdesigncourse) on CodePen.

:checked - пример за "hamburger menu" без JavaScript

Това е само пример за използване на :checked. С JavaScript e много по-лесно и естествено да създадем същата функционалност!

See the Pen :checked for Hamburger menu by Iva Popova (@webdesigncourse) on CodePen.

Полезни ресурси:

w3schools - CSS Pseudo-classes

Dev Mozilla.org - Pseudo-classes

Употреба

Селектират част от елемент.

Например първи ред от параграф (p::first-line)

Чрез псевдо-елементи можем и да "вмъкваме" съдържание в началото (div::before) или в края на даден елемент (div::after)

Общ синтаксис

				selector::pseudo­element {
					property:value;
					...
				}
			

В CSS3 разделителят за псевдо-елемент е :: за да се отличава от псевдо-клас. В предишните версии на CSS се използва само : за разделител. Но на практика работят и двата вида разделители.

::first­-letter

Селектира само първата буква от съдържанието на дадения елемент

				p::first­-letter{
					font-­size: 2em;
					color: red;
				}
			

::first­-line

Селектира само първият ред от съдържанието на дадения елемент.

				p::first­-line{
					font-­size: 2em;
					color: red;
				}
			

Размера на първия ред се определя динамично от браузера, в зависимост от големината на текста и вюпорта.

::first-line and ::first-letter examples

See the Pen :first-line by Iva Popova (@webdesigncourse) on CodePen.

::before и ::after

::before вмъква анонимен поредов елемент като първо дете на селектирания елемент.

::after вмъква анонимен поредов елемент като последно дете на селектирания елемент.

Съдържанието на вмъкнатият елемент се задава чрез свойството content, което е задължително да присъства

По дефоулт, вмъкнатият елемент ще бъде поредов (inline)

				.myQuote::before{
					content: '❝';
					color: gray;
				}
				.myQuote::after{
					content: '❞';
					color: gray;
				}
			

Разбира се, в елементи, които нямат съдържание, като IMG или BR, не можем да вмъкваме други елементи.

::before and ::after simple example

See the Pen ::before and ::after examples by Iva Popova (@webdesigncourse) on CodePen.

Повече за content свойството

Примери за content свойството

See the Pen unicode in content property by Iva Popova (@webdesigncourse) on CodePen.

Приложение за "изчистване" на float ефекта

See the Pen .clearfix with pseudo-elements by Iva Popova (@webdesigncourse) on CodePen.

Повече за float и clearfix: CSS-Tricks: Techniques for Clearing Floats

Още прмери за ::before/::after

CSS: :before and :after pseudo elements in practice - Krasimir Tsonev

Приложение на before/after + counter

CSS drop-down menu with Float over content

See the Pen CSS drop-down menu over content by Iva Popova (@webdesigncourse) on CodePen.

Codepen Collection

CSS_Selectors

EmojiAsListBullets

Към дадения по-долу HTML код, без да го променяте, добавете необходимият стил, така че да получите страницата, показана на снимката: EmojiAsListBullets

				<body>
					<h1>My Todo List</h1>
					<ul class="todoList">
						<li class="emoji emoji-smile">Learn HTML </li>
						<li class="emoji emoji-sad">Learn CSS</li>
						<li class="emoji emoji-loudly-crying">Learn JavaScript</li>
					</ul>
				</body>
			

Използвайте следните кодове за съответните класове:

• emoji-smile: 1F603
• emoji-sad: 1F625
• emoji-loudly-crying: 1F62D

Reference: Full Emoji List, v13.1