Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 6. Селекторы CSS. Псевдокласы и псевдоэлементы

Содержание курса

Селекторы классов в CSS

Помимо выборки по тегам элементы можно объединять в классы и задавать свойства в CSS целым классам:

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы классов в CSS</title>
			<style>
			/*Селектор тега*/
			div {color:red;}
			/*Селектор класса*/
			.green {color:green;}
			/*Комбинированный селектор тега и класса*/
			div.indigo {color:indigo;}
			</style>
		</head>
		<body>
			<div>Простой DIV</div>
			<p class="indigo">P с классом indigo</p>
			<div class="green">DIV с классом green</div>
			<div class="indigo">DIV с классом indigo</div>
			<div class="green">P с классом green</div>
		</body>
	</html>

Результат отображения:


Как видно из примера для того, чтобы объединить элементы в классы нужно задать у них атрибут class, элементы с одинаковым значением этого атрибута будут составлять один класс. В то же время один и тот же элемент может иметь более одного класса, в этом случае в значении атрибута class через пробел указываются нужные классы например: <div class="news yellow"> - этот элемент будет принадлежать и классу "news", и классу "yellow". Для того, чтобы обратится в CSS именно к элементу с несколькими классами, в селекторе они указываются все без пробела (порядок не важен) например, .news.yellow {}

Теперь в CSS можно сделать выборку элементов по селекторам классов, для этого нужно написать селектор класса, который начинается с точки и далее имя класса (см. пример).

В примере также видно, что можно использовать комбинированный селектор выборки по тегам и классам. Для этого сначала пишем тег, а потом, без пробела, имя класса с точкой вначале.

При использовании селекторов классов правила переопределения по ближайшему не работают! Здесь вступают в силу приоритеты - селектор класса по приоритету выше, чем селектор тега.

Селекторы id в CSS

Перво-наперво следует сказать, что атрибут id - это уникальность, поэтому на одной html странице не может быть двух и более элементов с одним и тем же значением id.

Селектор по id еще выше по приоритету, чем селектор класса. Чтобы указать селектор id вначале ставится знак решетки # и затем пишется id элемента, к которому нужно обратиться.

<!DOCTYPE html>
	<html>
		<head>
			<title>Селекторы id в CSS</title>
			<style>
			/*Селектор id*/
			#a {color:red;}
			/*Контекстный селектор*/
			div b {color:indigo;}
			/*Дочерний селектор*/
			div#b > b {color:green;}
			</style>
		</head>
		<body>
			<p id="a">P с id="a"</p>
			<div>
				<b>bold в DIV</b> <br />
				<strong>
					<b>bold в strong</b>
				</strong>
			</div>
			<div id="b">
				<b>bold в DIV с id="b"</b> <br />
				<strong>
					<b>bold в strong</b>
				</strong>
			</div>
		</body>
	</html>

Результат отображения:


Пояснения к примеру: первый селектор id задает красный цвет абзацу <p> с id="a". Здесь все просто.
Контекстный селектор (обращение к элементу в контексте другого элемента, вложенного) задает желтый цвет тексту всем <b>, которые находятся во всех <div>, причем на любом уровне вложенности. Обратите внимание на синтаксис контекстного селектора: сначала указывается родитель <div>, а затем через пробел нужные элементы внутри (потомки) этого <div>.
Дочерний селектор переопределяет зеленый цвет всем <b> только непосредственно внутри <div> (только первый уровень вложенности!) с id равным "b" (но не в <strong>, хотя он тоже внутри этого <div>). Обратите внимание на синтаксис: тег#id"нужный элемент".

Дочерние и контекстные селекторы позволяют избежать нагруженности html-кода, избавляя от необходимости указывать атрибуты классы и id.

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

Псевдоклассы позволяют задавать изменение цвета при наведении курсора на элемент, изменение цвета посещенных, непосещенных и активных (состояние ссылки при нажатии) ссылок и др.

Псевдоэлементы позволяют применять правила CSS к конкретным символам, например сделать буквицу (псевдоэлемент first-letter) или к конкретным строкам (псевдоэлемент first-line).

<!DOCTYPE html>
	<html>
		<head>
			<title>Псевдоклассы и псевдоэлементы</title>
			<style>
				/*Псевдоклассы для ссылок*/
				a:link {color:blue;} /*Задан голубой цвет для всех
								непосещенных ссылок*/
				a:visited {color:green;} /*Задан зеленый цвет для всех
								  посещенных ссылок*/
								  
		/*Псевдокласс с группировкой селектров для наведения курсора*/
				a:hover, h1:hover {background:silver;} /*При наведении
					курсора, цвет фона будет меняться на серебристый*/
						
		/*Псевдоклассы для первого и последнего "ребенка" своего
		"родителя"*/
				p:first-child {color:green;}
				p:last-child {color:blue;}
		/*Псевдоэлементы*/
				p:first-letter {color:red;}
				p:first-line {background:yellow;}
			</style>
		</head>
		<body>
			<h1>Курсор мыши наведен сюда</h1>
			<a href="file1.html">Непосещенная ссылка</a>
			<a href="file2.html">Посещенная ссылка</a>
			<a href="file3.html">На эту ссылку наведен курсор мыши</a>
			<div>
				<p>Первый абзац в DIV
				состоит из некольких строк</p>
				<p>Второй абзац в DIV
				состоит из некольких строк</p>
				<p>Третий абзац в DIV
				состоит из некольких строк</p>
				<p>Четвертый абзац в DIV
				состоит из некольких строк</p>
			</div>
		</body>
	</html>

Псевдокласс hover позволяет, кроме прочего, задать изменение цвета фона при наведении курсора на элемент и может применяться к любому элементу html.

Изучите пример внимательно и запомните синтаксис.

Псевдоэлемент first-child - обращение к элементу, который является первым ребенком своего родителя. Псевдоэлемент last-child - обращение к элементу, который является последним ребенком своего родителя.

Вам важно уяснить, что это и как это работает, поэтому разберитесь в этом примере внимательно, многое в CSS крутится именно вокруг таких "мозголомных" кодов, но если вы уясните как это устроено на этом примере, вам станет значительно легче изучать языки программирования дальше. Желательно попробовать написать такой код самостоятельно, хотя бы с подглядкой в пример.

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля