Лого SiteHere.ru

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

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

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

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


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


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

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

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

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

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

Дерево элементов html

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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 выглядит следующим образом:

1
2
3
4
5
6
7
8
9
10
11
body{
    background-color:#C1BAFF;
}
 
p{
    color:#4600BF;
}
 
ul li a{
    color:#ffffff;
}

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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 кода. Это был простой урок и я уверен что вы в нём разберетесь. Пробуйте всё прописать руками. Тогда вы лучше запомните материал.

Больше практикуйтесь!

1 комментарий к записи
  • Персианова Елена Владимировна

    Очень доходчиво. Лучший!

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *