Css что значит символ тильда. Селекторы. Pодственный селектор и псевдокласс:hover
Всем привет, хабрчане.
Сегодня CSS окружает нас вокруг, и даже маломайский программист должен понимать его.
Самыми используемыми являются старые добрые #id и.class они знакомы всем, кто хоть раз работа с CSS.
На этом конечно мир Селекторов далеко не ограничивается. Я уже довольно давно работаю с CSS и хочу поделится как можно большим количеством полезных селекторов. Все они определяют стиль того или иного объекта.
CSS SelectorsОбъясняю многие селекторы применимо к указанному примеру. .class (Пр. .main) Данный селектор объединяет все элементы с классом «main». Родился он давно и активно учувствует в разработке. #id (Пр. #Block_Form) Этот селектор объедение элементы с id=«Block_Form» В чем скажите разница между.class и #id - а разницу можно понять на примере: то что ПАСПОРТНЫЙ НОМЕР = id, ФАМИЛИЯ = class. Также немало важно то, что - Идентификатор (id) можно вызвать из скрипта используя функцию GetElementById, в отличие от класса.
Класс может быть использован многократно, идентификатор же должен быть уникальным. * Выбирает, объединяет все элементы (Пр. *)
{
background-color:yellow;
})
element (Пр. p) Объединяет все элементы тега p. element,element(Пр. div,p) Объединяет все элементы div и все элементы p
. Так же в эту группу можно выделить похожие селекторы:
element element (Пр. div p) Выбирает все элементы p внутри div. element>element (Пр. div>p) Объединяет все p для которых родителем выступает div. element+element (Пр. div+p) Объединяет все p которые расположены сразу после div. (Пр. ) Объединяет все элементы с атрибутом target (Пр. ) Объединяет все элементы с заданным target="_blank" (Пр. ) Объединяет все элементы, которые в своем title содержат «Apple» (Пр. ) Объединяет все элементы с атрибутом class начиння с «top» Все теги написаны были без "<>". Дальше считаю обязательно нужно показать именно эти селекторы, так как они являются очень важными и крайне часто используются в решении многих задач - от Простых анимашек с наведением курсора, оформлением ссылок, картинок и прочего до более глобальной цели уменьшения кода в целом. Так же их называют Псевдокласы::link (Пр. a:link) Объединяет все ссылки, которые еще не посещались (Пр. a:visited) Объединяет все ссылки, которые пользователь уже успел посетить :active (Пр. a:active) Псевдокласс:active определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее. :hover (Пр. a:hover) Когда проводишь мышкой, ссылка может менять стиль :focus (Пр. input:focus) Изменяет стиль при фокусировке. на практике часто используется для подсветки полей формы при фокусировке на нем :first-letter (Пр. p:first-letter) Определяет стиль для первого символа в тексте элемента :first-line (Пр. p:first-line) Определяет стиль первой строки. Использую для изменения цвета текста, цвета фона и шрифта, но как показывают народные хабрумельцы на этом его функции не ограничиваются :first-child (Пр. p:first-child) Что бы просто объяснить - применяет стилевое оформление к первому дочернему элементу своего родителя. В примере если р есть первым элементом своего родителя
Дальше идут два очень интересных класса: :before (Пр. p:before) :after (Пр. p:after)
Они применяются в тех случаях, когда - нужно отобразить нужный контент до или после содержимого элемента, к которому он добавляется. Работает совместно со свойством content:. Так же я их использую как дополнительные элементы вместо div, в таком случае нужно прописывать content:"";. Также нужно помнить о том, что при добавлении:before к блочному элементу, значение свойства display может быть только: block, inline, none, list-item. Все остальные значения будут трактоваться как block. При добавлении:before к встроенному элементу, display ограничен значениями inline и none. Все остальные будут восприниматься как inline.
:before наследует стиль от элемента, к которому он добавляется. :lang(language) (Пр. p:lang(it)) Довольно простой, но порой нужный элемент - для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it» Селекторы CSS3Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен. element1~element2 (Пр. p~ul) p~ul
{
background:red;
}
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря - на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р. A div element.
- в этом случае ничего не произойдет, а в
а в этом случае поля Айтемов будут иметь бэк-цвет - красный. (Пр. a) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:
item1
item2
item3
Item4
Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4. (Пр. a) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на ". PDF. И вот еще один наглядный пример:
Item1
Item2
Item3
Item4
На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3. (Пр. a) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».
item1
item2
item3
Item4
В этом примере результатом будут закрашенные строки item1, item3, item4. :first-of-type (Пр. p:first-of-type) Задает правила стилей для первого элемента в списке дочерних элементов своего родителя. :last-of-type (Пр. p:last-of-type) Соответственно задает правила стилей для последнего элемента в списке дочерних элементов своего родителя. :only-of-type (Пр. p:only-of-type) А вот этот применяется к дочернему элементу указанного типа, только если он единственный у родителя. Аналогично как:first-of-type:last-of-type или:nth-of-type(1):nth-last-of-type(1). :only-child (Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):
:nth-child(n) (Пр. p:nth-child(2)) Для каждого Который является вторым дочерним элементом у родителя.
:nth-last-child(n) (Пр. p:nth-last-child(2)) Тот же смысл, что и у предыдущего, кроме того, что отсчет ведется не от первого элемента, а от последнего. :nth-of-type(n) (Пр. p:nth-of-type(2)) Используется для добавления стиля к элементам указанного типа на основе нумерации. Например, для картинок у заглавия применить со значением Float: -left or –right. :nth-last-of-type(n) (Пр. p:nth-last-of-type(2)) Тоже, что и предыдущий, но отсчет ведется не от первого элемента, а от последнего. :last-child (Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя. Также стоит выделить:
:root (Пр. :root) Такой селектор определяет корневой элемент документа, иначе говоря - . :empty (Пр. p:empty) Определяет пустые элементы - без каких-либо дочерних элементов, текста или пробелов. :target (Пр.#news:target) Грубо говоря – это определение на основе целевого элемента. В примере определение текущего id - #news element. Используется для URL. :enabled (Пр. input:enabled) Применяется к формам, как доступ к доступным (не заблокированным - disabled) элементам форм, простите за тавтологию. :disabled (Пр. input:disabled) Иначе говоря – применимо к стилю заблокированных элементов формы. :checked (Пр. input:checked) Данный псевдокласс применим к элементам интерфейса, таким как переключатели (checkbox) и флаги (radio), когда они включены, конечно же. :not(selector) (Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.
Описание
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p
стиль будет применяться ко всем элементам Располагающихся после заголовка
. При этом
и Должны иметь общего родителя, так что если Вставить внутрь
, то стили применяться уже не будут.
Здесь красный цвет текста будет установлен для всех абзацев. H1 ~ p { color: red; }
Заголовок
Абзац 1
Абзац 2
Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку
и Не имеют общего родителя. H1 ~ p { color: red; }
Заголовок
Абзац 1
Абзац 3
Синтаксис
E ~ F { Описание правил стиля }
Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует сразу после него.
HTML5
CSS3
IE
Cr
Op
Sa
Fx
Селекторы
В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку.
Всем доброго времени суток. На связи Алексей Гулынин. В данной статье я бы хотел рассказать, какие новые селекторы появились в CSS3
. Сразу отмечу, что все старые селекторы (селекторы тегов, класса, id, псевдоселекторы) также остались. С появлением новых селекторов намного упрощается работа верстальщика, так как сейчас для того, чтобы сделать что-то, не нужно придумывать велосипед и изобретать очередной костыль. Давайте создадим html-страницу, на которой будем тестировать новые селекторы:
Новые селекторы CSS3
Блок 1: Текст, текст, текст
Селектор first-child
позволяет задать стиль первому элементу. Чтобы было понятнее сразу пример: Ul li:first-child {
background: red;
}
Если вы запустите данный пример, то увидите, что фон первого элемента списка стал красным. Если можно задать для первого элемента, то должно быть и для последнего:
Селектор last-child
позволяет задать стиль последнему элементу. Пример: Ul li:last-child {
background: green;
}
После запуска данного примера, фон последнего элемента списка станет зеленым.
Самое замечательное то, что теперь появился селектор, с помощью которого можно задать любому произвольному элементу определенный стиль:
Селектор nth-child()
, в параметрах которого необходимо передать тот элемент, к которому нужно применить стили: Ul li:nth-child(2) {
background:yellow;
}
В данном случае 2 элемент списка станет желтым. Обратите внимание на синтаксис: после ":"
пробела быть не должно.
С появлением CSS3 стало возможным изменить цвет выделения. Когда мы выделяем текст на странице в браузере, он обычно становится белым на синем фоне.
Селектор ::selection
позволяет настроить это дело под наш вкус:
::selection {
background: pink;
color: brown;
}
Наберите данный пример и попробуйте что-нибудь выделить (цвет выделения должен измениться).
Теперь можно фильтровать элементы на странице. Допустим нам нужно отобрать все блоки, id которых начинается с "te". Для этого нужно написать следующий код: Div {
background: #4c4c4c;
}
Конструкция "^="
означает, что id (в нашем случае) должен начинаться "te". Запустите данный пример и посмотрите результат работы. С помощью следующей конструкции можно отобрать элементы, которые заканчиваются на что-то определенное. Допустим у нас есть на странице картинки в формате jpeg и png. Мы хотим всем картинкам в формате png добавить рамку. Делается это следующим образом.
Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p
стиль будет применяться ко всем элементам Располагающихся после заголовка
. При этом
и Должны иметь общего родителя, так что если Вставить внутрь
, то стили применяться уже не будут. Здесь красный цвет текста будет установлен для всех абзацев. H1 ~ p { color: red; }
Заголовок
Абзац 1
Абзац 2
Здесь красный цвет текста будет установлен для первого и третьего абзацев. Ко второму абзацу стиль не применяется, поскольку
и Не имеют общего родителя. H1 ~ p { color: red; }
Заголовок
Абзац 1
Абзац 3
Синтаксис E ~ F { Описание правил стиля }
Для управления стилем родственных элементов используется символ тильды (~), он добавляется между двумя селекторами E и F. Пробелы вокруг тильды не обязательны. Стиль при такой записи применяется к элементу F в том случае, если он имеет того же родителя, что и элемент E и следует после него. Обозначения|
| Описание
| Пример
|
|---|
| <тип>
| Указывает тип значения.
| <размер>
|
| A && B
| Значения должны выводиться в указанном порядке.
| <размер> && <цвет>
|
| A | B
| Указывает, что надо выбрать только одно значение из предложенных (A или B).
| normal | small-caps
|
| A || B
| Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.
| width || count
|
|
| Группирует значения.
| [ crop || cross ]
|
| *
| Повторять ноль или больше раз.
| [,<время>]*
|
| +
| Повторять один или больше раз.
| <число>+
|
| ?
| Указанный тип, слово или группа не является обязательным.
| inset?
|
| {A, B}
| Повторять не менее A, но не более B раз.
| <радиус>{1,4}
|
| #
| Повторять один или больше раз через запятую.
| <время>#
|
×
Пример
Селекторы
В данном примере все изображения изначально скрыты, но отображаются если поставить в поле формы галочку. СпецификацияКаждая спецификация проходит несколько стадий одобрения. - Recommendation (Рекомендация
) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация
) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация
) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект
) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик
) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации
) - первая черновая версия стандарта.
×
Ближайшие статьи этого учебника будут посвящены глубокому изучению селекторов, благодаря которым вы научитесь выбирать совершенно любой элемент, размещенный в HTML документе.
Основная функция селекторов заключается в том, чтобы контролировать дизайн веб страниц, выбирая элемент, или элементы по определенным критериям и стилизуя их с помощью CSS свойств, которые вы указываете в блоке объявлений (описаний).
Селектор типа
В предыдущих примерах, да и в практическом задании предыдущей статьи " " мы с Вами использовали селекторы типа, которые определяют HTML элемент, к которому будет применен стиль. Если вы хорошо знакомы с HTML тегами, то вам будет легко определять в стилях селекторы типа, так как они имеют одноимённые наименования с форматируемыми элементами, например: - p
(параграф).
- table
- сообщает браузеру, что необходимо отформатировать все HTML теги
(таблица).
- li
- сообщает браузеру, что необходимо отформатировать все HTML теги
- (элемент списка).
Давайте рассмотрим пример, в котором с использованием селектора типа мы стилизуем все заголовки второго уровня ( ):
</span>Селектор типа
Обычный заголовок второго уровня
Результат нашего примера:
Как вы могли заметить, селектор типа позволяет стилизовать сразу все элементы подобного типа, но что делать если нам необходимо стилизовать какой-то однотипный элемет отлично от других? В этом случае селектор типа нам уже не подойдет и нам придется использовать селектор класса.
Селектор класса
Рис. 4 Селектор класса в CSS.
Прошу от Вас максимального внимания, так как селектор класса является одним из самых распространенных и востребованных селекторов CSS, который мы будем постоянно использовать в дальнейшем изучении CSS.
И так, мы хотим, чтобы один из элементов выглядел не так, как другие. Для этого нам необходимо создать селектор, назначив ему имя, которое нам необходимо придумать самостоятельно:
.test
{
/* имя класса в таблице стилей задается через точку */
text-align
: center
;
font-family
: Courier
;
color
: green
; /* задаем цвет текста*/
margin-top
: 50px
; /* добавляем отступ от верхнего края элемента */
}
После того как мы создали наш класс в таблице стилей, нам необходимо применить его к интересующему нас элементу, или элементам, которые мы хотим стилизовать. Чтобы указать класс для определенного элемента, необходимо добавить к этому элементу глобальный HTML атрибут class со значением нашего класса, но без точки:
class =
"test"
>
Заголовок второго уровня
/* задаем класс для элемента*/
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:
- в отличии от селекторов типа все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, ).
- название после точки всегда должно начинаться с символа (неправильно: .50cent
, .-vottakvot
).
- Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot
и .VotTakVot
разные классы).
</span>Селекторы класса
Обычный заголовок второго уровня
Заголовок с заданным классом
Результат нашего примера: Рис. 5 Использование селектора класса.
Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:
</span>Пример выделения одного слова
Обычный заголовок class =
"test"
>
второго
уровня
Результат нашего примера:
Обращаю Ваше внимание, что вы можете использовать селекторы класса напрямую к HTML элементам, используя следующий синтаксис:
a.test
{
/* выбирает все элементы с классом test */
блок объявлений
;
}
p.intro
{
/* выбирает все элементы С классом intro */
блок объявлений
;
}
ID селекторы
Рис. 7 Селектор id в CSS.
Основная задача селектора id
заключается в том, чтобы выбрать элемент с определённым идентификатором.
Для начала необходимо создать идентификатор, назначив ему имя, которое нам необходимо придумать самостоятельно:
#test
{
/* имя идентификатора в таблице стилей задается через решетку */
background-color
: #00FF00
; /*Задаём цвет заднего фона*/
color
: white
; /*Задаём цвет шрифта белый*/
font-size
: 30px
; /*Указываем размер шрифта*/
width
: 600px
; /*Указываем ширину элемента*/
height
: 40px
; /*Указываем высоту элемента*/
text-align
: center
; /*Выравниваем текст по центру внутри элемента*/
}
После того как мы создали наш идентификатор в таблице стилей, нам необходимо применить его к интересующему нас элементу, который мы хотим стилизовать. Чтобы указать идентификатор для элемента, необходимо добавить к этому элементу глобальный HTML атрибут со значением нашего идентификатора, но уже без решетки:
id =
"test"
>
Обычный заголовок второго уровня
Обратите внимание на следующие правила, которые необходимо соблюдать при работе с id селекторами:
- значение идентификатора должно быть уникально на странице, размещение нескольких одноименных идентификаторов на странице считается ошибкой (выборка остановится на первом идентифакторе).
- все названия id
селекторов должны начинаться с решётки (благодаря ей браузеры находят эти селекторы в таблице стилей). Решетка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута она не ставится, будьте внимательны из-за этого возникает много ошибок
).
- используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
- название после решётки всегда должно начинаться с символа (неправильно: #50cent
, #-vottakvot
).
- Учитывайте регистр при наименовании id селекторов, т.к. они к этому чувствительны (#vottakvot
и #VotTakVot
разные идентификаторы).
Теперь соберем это в одном примере и посмотрим результат:
</span> ID селекторы
Обычный заголовок второго уровня
Результат нашего примера:
В настоящее время id
селекторы в основном применяются на веб страницах с целью динамического управления элементами с использованием языка программирования JavaScript
.
Групповые селекторы
В CSS допускается задать единый стиль не только одному селектору, но и группе селекторов. В группу могут входить как селекторы типа
, селекторы класса
, так и рассмотренные нами id селекторы
. При перечислении любых селекторов (даже, которые мы будем рассматривать далее в учебнике) необходимо обязательно разделять их запятой
, позднее вы поймете почему.
Например:
Первым
групповым селектором мы указываем, что заголовки и , элементы с классом test
и элемент с идентификатором test
получат цвет заднего фона зеленый
.
Вторым
групповым селектором мы указываем, что кроме заднего фона элементы с классами test
и элемент с идентификатором test
получат синий
цвет текста.
Рассмотрим следующий пример:
</span>Групповые селекторы
Заголовок первого уровня
Заголовок второго уровня
class =
"test"
>
Абзац с классом test
Заголовок третьего уровня
id =
"test"
>
Абзац с идентификатором test
Заголовок четвертого уровня
В этом примере мы использовали три групповых селектора:
Селектор *
позволяет выбрать все элементы внутри документа (универсальный селектор).
Давайте рассмотрим пример использования:
</span>Универсальный селектор
Заголовок первого уровня
Заголовок второго уровня
Абзац, который не несет никакой смысловой нагрузки
В этом примере с использованием универсального селектора мы указали, что все элементы на странице получат определенный цвет текста и будут иметь курсивное начертание шрифта.
Результат нашего примера:
Кроме того универсальный селектор может использоваться в качестве селектора потомков и выбирать все элементы, которые находятся внутри другого элемента.
.test *
{
/* выбирает все элементы внутри элемента c назначенным классом test */
объявление
;
}
#test *
{
/* выбирает все элементы внутри элемента c назначенным идентификатором test */
объявление
;
}
div *
{
/* выбирает все элементы внутри элемента */
объявление
;
}
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Подсказка: при выполнении практических заданий вы можете располагать стилевую информацию как внутри самой веб страницы, так и в отдельном файле.
В практических заданиях для определения цвета элементов вы можете использовать графические редакторы - инструмент палитра (пипетка), либо установите плагин для вашего браузера (например, CollorZilla
), либо использовать свои цвета, так как копирование цветов не является целью практического занятия.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.
|
|
|
|
