Какие бывают Селекторы в CSS
Если в CSS уже назначены стили, например для параграфов <р> задан синий цвет текста и размер шрифта 14 пикселей. Вам нужно задать одному из параграфов <р> красный цвет и размер шрифта 20 пикселей. Что же делать?
Для этого селекторы разделяют на несколько типов:
1. Селекторы CSS для элементов .
2. Селекторы CSS для для классов
3. Селекторы id
4. Селекторы CSS для контекста
1. Селекторы CSS для элементов — нужны для тэгов HTML к которым применяли какой либо стиль. Например заголовки и параграфы:
h1
{text-align: center;}
p
{color: blue ;font-size: 28px; text-indent: 20px; }
2. Селекторы для CSS классов — когда необходимо для одного параграфа сделать другой стиль отличающийся от всех остальных стилей. Для этого нужно создать класс в CSS.
Пример:
>> В CSS пишем
.stepa
{font-size: 24px; color: red}
.stepa, это название нашего нового класса и в скобках стиль. «Класс», вы можете назвать как угодно, я его назвал «stepa», вы можете назвать «peta» или «sos» и не забудьте про точку перед классом «.sos»
Потом это «класс» применяем в HTML. Допустим для параграфа:
>> В HTML пишем
<p class =»stepa«> … текст в параграфе … </p>
Для закрепления темы ещё один пример:
>> Так выглядит код в HTML
<p>здесь работает «Селекторы CSS для элементов»</p>
<p class =»stepa»>здесь новый «Селекторы CSS для для классов», текст красный</p>
<p>здесь работает «Селекторы CSS для элементов» </p>
>> Так выглядит код в CSS:
p
{font-size 32px; color: blue; }
.stepa
{font-size: 24px; color: red}
Сначала создаём основной стиль для всех параграфов (селектор для элемента) а затем если нужно изменить какой либо атрибут создаем новый стиль (селектор для класса).
3. Селекторы id — нужны для того чтобы задать стиль для одного элемента, который будет отличаться от всех остальных.
К примеру, все стили заданы для всех элементов : для параграфов, для заголовков, для фона и т.д., но нам нужно чтобы один единственный параграф отличался цветом и размером шрифта.
>> В CSS это будет так :
p#toptext
{color: yellow; font-size: 32px; }
>> А в файле HTML укажем:
<p id=»toptext«> Текст верхнего параграфа </p>
Этот тип селектора похож на предыдущий селектор для класса, разница лишь в том, что вместо атрибута «class» используется атрибут «id», а вместо точки ставиться «#».
4. Селекторы для контекста — используются для определения стиля к атрибутам текста.
Например : я хочу чтобы текст в параграфе который выделен жирным шрифтом был зелёного цвета. Для этого я должен задать параметры стиля для атрибута strong.
Пример :
p strong
{color: green; }
Что у нас получилось?
Весь текс будет цветом по умолчанию а выделенный будет зелёным.
Пример 2 :
table p em
{color: blue; }
В втором примере получится вот что :
Весь текст встречающийся в параграфах таблиц и написанный курсивом, должен быть синего цвета