Виды классов селекторов, продолжение.
7)Селекторы потомков:
<STYLE type="text/css">
H1, STRONG{ color: blue }
H1 STRONG { color: red }
</STYLE>
*****
<H1>синий цвет</H1>
<P> <strong>синий цвет </strong></P>
<H1>синий цвет <strong>красный цвет </strong></H1>
В моем примере я создал правило, которое тегу H1 и STRONG присваивает синий цвет текта, но если текст в теге STRONG помещен в H1, он будет красного цвета. Еще например в HTML картинке задают размер в пикселях, но в таблице мы можем задать width=100%, чтобы картинка расширилась на всю ячейку, то в CSS это будет выглядеть вот так:
TD IMG{width:100%}
Комбинации могут быть более сложными:
DIV P STRONG{color: blue}
DIV * STRONG{color: blue}
Т.е. можно составлять с двух и более селекторов, оба эти примера имеют одинаковое значение, если тег DIV будет содержать в себе P, а тот в свою очередь STRONG, то текст в последнем станет синим. Второй пример вместо P содержит звездочку, она может заменить любой селектор или даже комбинацию селекторов.
8)Дочерние селекторы тегов.
<html>
<head>
<title>ВВедение в CSS</title>
</head>
<body>
<body>
<H1>Текст по центру</H1>
<b> жирный и <i>наклонный</i> текст</b>
</body>
</html>
Дочерние селекторы отличаются от потомков, тем что они идут сразу за родителями, например теги BODY и HEAD для HTML являются дочерними , в свою очередь, тег title для head и теги H1 и B для BODY так-же являются дочерними, но теги TITLE, H1 и B для HTML являются потомками(внуки, правнуки и т.д.), а не дочерними.
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
P, DIV { color: blue }
DIV>P { color: red }
</STYLE>
</head>
<body>
<body>
<DIV>текст синего цвета</DIV>
<DIV>текст синего цвета
<P>текст красного цвета</P>
</DIV>
<P>текст синего цвета</P>
</body>
</html>
Для того чтобы упрявлять только дочерними тегами используется символ ">".
9) Смежные селекторы(родственники) , это селекторы у которых общий родитель:
<html>
<head>
<title>ВВедение в CSS</title>
<STYLE type="text/css">
STRONG + EM { color: red }
</STYLE>
</head>
<body>
<body>
<P>текст черного цвета
<em> текст черного цвета </em>
<strong> текст черного цвета </strong>
<em> текст красного цвета </em>
</P>
</body>
</html>
Такие правила выполняются только если оба тега идут друг за другом.
