Урок 3. Групповые селекторы и селекторы потомков

Здравствуй, уважаемый читатель.

Это третий урок изучения технологии CSS. Из данного урока вы узнаете что такое групповые селекторы, как их использовать, а также узнаете про селекторы потомков.

Перед изучением CSS пройдите предыдущие уроки:

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы

Теория и практика

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

Селектор потомков

Вся html страница похожа на дерево. Главный элемент страницы это тег <html>, а все остальные теги это потомки данного тега. Теги <head> и <body> являются потомками тега <html>. То есть тег <html> для них является для них родителем. Наглядно можно увидеть на картинке ниже:

А так как html страница это иерархия элементов, значит мы можем обращаться к любому элементу страницу через ее родитилей\потомков. Чтобы не томить с теорией посмотрим пример.

Задача: Нам необходимо раскрасить все ссылки на странице, которые находятся внутри списка. Ниже представлена html код необходимой нам страницы.

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Изучение CSS</p>
    <p><a href="#">Перейти на главную</a></p>
    <p>Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.</p>
 
    <ul>    
        <li>Классный сайт <a href="#">SiteHere.RU</a></li>
        <li>Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet. Перейдите по ссылке <a href="#">Перейти</a></li>
    </ul>
</body>
</html>

Вы заметили что у нас есть ссылка, которая находится в теге <html>, а также ссылки которые находятся в списке в тегах <li>. Для того чтобы решить нашу задачу существует селектор потомков. Решение в CSS выглядит следующим образом:

body{
    background-color:#C1BAFF;
}
 
p{
    color:#4600BF;
}
 
ul li a{
    color:#ffffff;
}

Для того чтобы выбрать только те ссылки, которые находятся внутри тегов <li> необходимо в CSS написать следующее:

Как видите в примере ниже у нас выбрались только ссылки которые находятся внутри тега <li>, а ссылка в теге <p> осталась неокрашенной. То есть мы можем получить доступ к любому элементу через иерархию html элементов.

Посмотреть пример Скачать

Групповой селектор

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

<html>
<head>
    <title>Главная</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <p>Изучение CSS</p>
	<p><a href="#">Перейти на главную</a></p>
	<p class="text">Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.</p>
 
	<div id="content">
	Pellentesque egestas tellus nec sapien euismod, et tincidunt tortor convallis. Maecenas quis arcu ac mauris pretium egestas eget eget urna. Vivamus adipiscing sem vel nulla auctor ultrices. Donec commodo gravida tellus ac convallis. 
	</div>
	<ul>
		<li class="site">Классный сайт <a href="#">SiteHere.RU</a></li>
		<li>Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet. Перейдите по ссылке <a href="#">Перейти</a></li>
	</ul>
</body>
</html>

Нам необходимо выделить жирным элементы с селекторами class="site", id="content" и текст в тегах <p>.

Чтобы выбрать все эти элементы в CSS всего лишь необходимо прописать следующее:

1
2
3

.site, #content, p{
    font-weight:bold; /*жирный текст для текста*/
}

Также рекомендую посмотреть пример:

Посмотреть пример Скачать

Сегодня мы рассмотрели групповые селекторы и селекторы потомков, для более гибкого написания CSS кода. Это был простой урок и я уверен что вы в нём разберетесь. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.