Что значит в css знак

Что означает селектор CSS «>» (знак «больше»)?

8 ответов

Иллюстрация, сравнивающая дочерний комбинатор с потомком комбинатора:

Какие элементы соответствуют каким селекторам?

1 _{Многие люди идут дальше, называя его «прямым потомком» или «непосредственным потомком», но это совершенно не нужно (и меня невероятно раздражает), потому что дочерний элемент является непосредственным по определению , так что они означают одно и то же. Не существует такого понятия, как «косвенный потомок».}

Селектор CSS может содержать более одного простого селектора. Между простыми селекторами мы можем включить комбинатор.

В CSS3 есть четыре разных комбинатора:

Примечание. недопустим в селекторах CSS.

Например:

Вывод:

Как упоминают другие, это дочерний селектор. Вот соответствующая ссылка.

(дочерний селектор) был введен в css2. div p <> выбирает все элементы p, являющиеся потомками элементов div, тогда как div> p выбирает только дочерние элементы p, а не большие дочерние элементы, великие дочерние элементы и т. д.

Для получения дополнительной информации о CSS Ce [лекторах и их использовании, посетите мой блог, css-селекторы и селекторы css3

Все прямые дочерние элементы, которые являются

Селектор со знаком «больше» (>) в CSS означает, что селектор справа является прямым потомком / потомком того, что находится слева.

Означает только стиль абзаца, который идет после статьи.

Источник

30 CSS селекторов, которые вы должны знать

Приветствую, друзья, сегодня я покажу 30 CSS селекторов, которые должен знать каждый верстальщик и веб-разработчик. Не важно, если вы только ознакомились с основными CSS селекторами в виде классов и id, или вы уже некоторые время работаете, эта статья поможет всем. Новичкам она поможет разобраться в вопросе лучше. Опытным же разработчикам поможет оптимизировать код, и ускорить процесс верстки в будущем.

Как всегда, я уже подготовил видео к этой статье, советую посмотреть его. В видео я подробнее рассказываю о 30 CSS селекторах. Так же в видео я покажу на примерах как работает тот или иной селектор. Эту же статью я рекомендую использовать больше как шпаргалку к видео и последующей работы. Давайте начинать!

Видео о 30 CSS селекторах, которые вы должны знать

CSS селектор *

Данный селектор выбирает все элементы на странице. Часто его используют в самом начале документа для указания свойства box-sizing: border box для всех элементов. Но вы можете указывать любые свойства. Я в примере ниже указал цвет текста. Он применится для всех элементов на странице.

CSS селектор # / #element

Скорее всего вы уже знакомы с селектором id. Это один из самых базовых селекторов. Однако, я советую избегать использования данного селектора для стилизации. ID селектор более функционален для использования из JavaScript. В CSS же он только вносит дополнительную сложность, если вы все элементы стилизуете через классы, а некоторые через id. Так же особенность id это то, что id должен быть уникален, и с помощью него можно выбрать только 1 элемент на странице.

CSS селектор . / .element

Это так же базовый и самый часто используемый селектор. В отличие от id он не должен быть уникален и может использоваться для выбора нескольких элементов на странице. С помощью него стилизуют почти все элементы на странице.

CSS селектор element element (контекстный)

С помощью данного селектора можно выбрать элементы, которые соответствуют заданному контексту. Здесь вы можете передавать другие селекторы, например, классы, ID или название тегов. Давайте рассмотрим такие примеры:

Так же мы можем задавать свойства по условию. Например, сменить цвет элементу, если он имеет указанный класс.

CSS селектор element (селектор по типу)

Данный селектор помогает выбрать все элементы с указанным типом на странице. Например, мы можем выбрать все ссылки или списки.

CSS селектор a:visited и a:link

С помощью css селектора a:link мы можем выбрать все ссылки, на которые пользователь еще не нажал. С помощью же селектора a:visited мы сможем выбрать те ссылки, по которым пользователь уже переходил. Так же вы можете комбинировать селекторы между собой. Например, стилизовать ссылки с заданным классом, по которых пользователь уже переходил.

CSS селектор + / element + element

Позволяет выбрать элемент, который идет сразу же после указанного элемента.

CSS селектор > / element > element

Позволяет выбрать только тот элемент, который является прямым потомком указанного элемента. Давайте рассмотрим такой код с комментариями.

CSS селектор

Данный селектор похож на селектор +. Только в отличие от него, он выберет не первый элемент после указанного, а все указанны элементы, расположенные на том же уровне вложенности.

CSS селектор [attribute] / element[attribute]

Это селектор атрибутов. Он выберет все элементы, у которых присутствует указанный атрибут.

CSS селектор [attribule=»value»] / element[attribule=»value»]

Данный селектор выбирает те элементы, у которых указан заданный атрибут с заданным значением. Особенностью данного селектора является его строгость. Если ссылка будет хоть немного отличатся, например будет указанно http://google.com или google.com, то селектор не сработает.

CSS селектор [attribute*=»value»] / element[attribute*=»value»]

Данный селектор очень похож на предыдущий, однако он является более гибким. Здесь мы указываем то значение, которое должно быть хотя бы частью искомого атрибута. Однако важно помнить, что он слишком обширен. Например, код ниже так же выберет домен, например, ex-google.com, так как в нем есть наша искомая часть.

CSS селектор [attribute^=»value»] / element[attribute^=»value»]

Данный селектор ищет элементы, у которых начало значения атрибутов соответствую заданному началу строки.

CSS селектор [attribute$=»value»] / element[attribute$=»value»]

Данный атрибут очень сильно похож на предыдущий, однако он ищет не по началу строки, а по концу.

CSS селектор [data-*=»value»] / element[data-*=»value»]

Данный селектор помогает выбрать элементы в зависимости от значения data атрибута. Давайте в примере ниже выберем все ссылки, которые ведут на внешний источник.

CSS селектор [data-

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

Теперь мы можем выбрать данную ссылку двумя способами.

CSS селектор :checked / element:checked

Как видно из названия, данный селектор выбирает только отмеченные/выбранные чекбоксы и радио кнопки. В примере ниже мы объединим несколько уже пройденных селекторов. Мы будем красить label, в зависимости от состояния чекбокса.

CSS селекторы ::before и ::after

Тут мы получаем псевдоклассы определенного элемента. Они позволяют нам добавить контент вокруг данного элемента. В примере ниже мы добавим красную точку после элемента с классом block.

CSS селектор :hover / element:hover

Тоже очень часто используемый селектор. Позволяет присваивать стили при наведении на элемент.

CSS селектор :not(selector) / element:not(selector)

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

CSS селектор ::pseudoElement / element::pseudoElement

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

Как выбирать первую строчку параграфа

Как выбрать первую букву параграфа

CSS селектор :nth-child(n) / element:nth-child(n)

Помогает выбрать элемент в зависимости от его позиции на данном уровне вложенности.

CSS селектор :nth-last-child(n) / element:nth-last-child(n)

Позволяет выбрать определенный элемент с конца.

CSS селектор :nth-of-type(n) / element:nth-of-type(n )

Очень похож на селектор :nth-child, однако он работает не для всех дочерних элементов, а только для тех, которые соответствуют типу. Важной особенностью является то, что считает он так же только элементы с нужным типом.

CSS селектор :nth-last-of-type(n) / element:nth-last-of-type(n)

Работает как селектор выше, но начинает считать с конца.

CSS селектор :first-child / element:first-child

Этот псевдокласс выбирает первый дочерний элемент.

CSS селектор :last-child / element:last-child

Этот псевдокласс выбирает последний дочерний элемент.

CSS селектор :only-child / element:only-child

Откровенно говоря, вы вря дли будете хоть сколько-нибудь часто использовать данный селектор. Он позволяет выбрать элемент, если он единственный дочерний элемент другого элемента.

CSS селектор :only-of-type / element:only-of-type

Позволяет выбрать элемент, если он единственный элемент заданного типа у родителя.

CSS селектор :first-of-type / element:first-of-type

Выбирает первый элемент указанного типа. Нумерация начинается только с нужного типа элемента.

Спасибо, что прочитали! Если у вас остались вопросы, задавайте их в комментариях на YouTube или в нашем Telegram чате.

Так же советую ознакомиться с другими моими статьями:

Источник

Что означает селектор CSS » + » (знак плюс)?

11 ответов

этот селектор означает, что стиль применяется только к абзацам непосредственно после очередного абзаца.
Равнина p selector применит стиль к каждому абзацу на странице.

посмотреть селекторы ВКЛ W3.org.

это будет работать только на IE7 или выше. В IE6 стиль не будет применяться ни к каким элементам. Это также относится к > комбинатора, кстати.

это соседний селектор братьев и сестер.

чтобы определить смежный селектор CSS, используется знак плюс.

вышеуказанный код CSS будет форматировать первый абзац после (не внутри) любых заголовков h1 как синий.

h1>p выбирает p элемент, который является прямым (первого поколения) ребенка (внутри) в h1 элемент.

h1+p выберите первый p элемент, который является братом (на том же уровне dom), что и h1 элемент.

на + знак означает выберите adjacent sibling

в CSS

HTML-код

стиль будет применяться со второго

пример

Поддержка Браузеров

селекторы смежного брата поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в Netscape 6 preview release 1 для всех бесчисленных платформ, для которых он доступен, и в preview release 3 Opera 4 для Windows. В IE5 для Windows и Opera 3 для Windows есть ошибки в обработке селекторов соседних братьев.

хорошо знаю: Internet Explorer 7 неправильно обновляет стиль, когда элемент динамически помещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставляется динамически, нажав на ссылку, первый дочерний стиль не применяется, пока ссылка не потеряет фокус.

узнать больше

«+» является смежным селектором братьев. Он будет выбирать любой p непосредственно после p (не ребенок или родитель, хотя, брат).

например, селектор p + p выбирает p элементы сразу после p элементов

это можно рассматривать как looking outside селектор, который проверяет наличие следующего элемента.

вот пример фрагмента, чтобы сделать вещи более ясными:

так как мы одно и то же тема, стоит упомянуть еще один селектор,

выбор General Sibling Selector

вот как это выглядит с той же разметки:

обратите внимание, что последний p также соответствует в этом образце.

Он будет соответствовать любому элементу p Это непосредственно примыкает к элементу ‘p’. Смотри:http://www.w3.org/TR/CSS2/selector.html

Он выбирает следующий абзац и отступы в начале абзаца слева так же, как вы могли бы в Microsoft Word.

+ представляет один из относительных селекторов. Список всех относительных селекторов:

элементы, прямой родитель

элементы сразу после

элементы, которым предшествует a

подробнее о проверке селекторов здесь.

плюс ( + ) выберет первый непосредственный элемент. При использовании + selector необходимо указать два параметра. Это будет более ясно на примере: здесь div и span являются параметрами, поэтому в этом случае будет стилизован только первый span после div.

выше стиль будет применяться только к первому промежутку после div. Важно отметить, что второй диапазон не будет выбран.

конечный результат выглядит следующим образом

это означает, что он соответствует каждому p элемент, который непосредственно примыкает

Источник

Что вы не знали о селекторах CSS?

CSS Selectors

Объясняю многие селекторы применимо к указанному примеру.

.class

Выбирает, объединяет все элементы

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.

[attribute]

(Пр. [target]) Объединяет все элементы с атрибутом target

[attribute=value]

(Пр. [target=_blank]) Объединяет все элементы с заданным target=»_blank»

[attribute

=Apple]) Объединяет все элементы, которые в своем title содержат «Apple»

[attribute|=value]

(Пр. [class|=top]) Объединяет все элементы с атрибутом class начиння с «top»

Все теги написаны были без «<>«.

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

Так же их называют Псевдокласы:

:visited

:active

:hover

:focus

:first-letter

:first-line

:first-child

:before

:after

:lang(language)

(Пр. p:lang(it)) Довольно простой, но порой нужный элемент — для примера: Определяет стиль каждого p с атрибутом lang, значение которого начинается с «it»

Селекторы CSS3

Данные селекторы вызывают большой интерес, так как они мало кем используются и, конечно, хочется разобраться как ими пользоваться, поэтому буду приводить примеры. Также в данной группе селекторов в многострадальном IE8 и раньше DOCTYPE должен быть объявлен.

element1

ul)
Устанавливает цвет фона для всех ul элементов, которые предшествуют p с таким же родителем. Грубо говоря — на этом примере, красным будет бэкграунд только у тех «списков» которые стоят после родителя тега р.
— в этом случае ничего не произойдет, а в
а в этом случае поля Айтемов будут иметь бэк-цвет — красный.

[attribute^=value]

(Пр. a[src^=«https»]) По примеру определяет стиль каждого a для которого значение элемента src начинающегося с «https». Вот еще пример:

Проще говоря – данный селектор дает возможность установить цвет фона на всех div элементов, которые имеют значение атрибута класса, начинающихся с «тест» – а именно item3, item4.

[attribute$=value]

(Пр. a[src$=».pdf»]) Выбирает каждый тег a, для которого SRC значение атрибута заканчивается на «. PDF. И вот еще один наглядный пример:

На этом примере очень хорошо будет видно использование данного селектора, а именно в Красный цвет перекрасятся Item1 (по тому что класс заканчивается на _test) и item3.

[attribute*=value]

(Пр. a[src*=«w3schools»]) Выбирает каждый тег a, для которого значение атрибута SRC содержит подстроку «w3schools».

В этом примере результатом будут закрашенные строки item1, item3, item4.

Дальше перейдем к псевдоклассам

:first-of-type

:last-of-type

:only-of-type

:only-child

(Пр. p:only-child) Такой элемент применяется по примеру к дочернему элементу p, только если он единственный у родителя

Следующие два можно также неплохо использовать для определенной последовательности – нечетные (odd), четные(even) или число(1,2,3… или выражения 2n+1), заданные в (Х):

:nth-child(n)

, который является вторым дочерним элементом у родителя.

:nth-last-child(n)

:nth-of-type(n)

:nth-last-of-type(n)

:last-child

(Пр. p:last-child) Данный селектор задает стилевое оформление последнего элемента своего родителя.

Также стоит выделить:

:empty

:target

:enabled

:disabled

:checked

:not(selector)

(Пр. :not(p)) На примере стиль применяется ко всем элементам, которые не p. В качестве селектора могут быть псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов.

Источник

Что означает «*» в CSS?

Я просматривал файлы CSS для многих веб-сайтов, таких как Facebook и Youtube.

Практически во всех из них я вижу такой код:

Это странно, поскольку удаление этого блока в инструментах веб-разработчика Chrome не влияет на макет страницы.

Что означает этот код, когда он используется и почему?

8 ответов

Это распространенный метод, называемый сбросом CSS. В разных браузерах используются разные поля по умолчанию, из-за чего сайты выглядят по-разному. * означает «все элементы» (универсальный селектор), поэтому мы устанавливаем для всех элементов имеют нулевые поля и нулевые отступы, благодаря чему они выглядят одинаково во всех браузерах.

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

Это обычная часть общего сброса css. Это в основном устанавливает для всех полей и отступов всех (*) элементов значение 0. Затем вы можете добавить свои собственные значения полей и отступов к каждому элементу в соответствии с вашими требованиями.

В CSS есть несколько стилей по умолчанию, применяемых к каждой веб-странице в дополнение к вашим стилям. Эти стили по умолчанию определяют определенные значения padding и margin для таких элементов, как

Это подстановочный знак, который устанавливает margin и padding в 0 для всех элементов HTML.

Попробуйте более интересный вариант:

Он сбрасывает поля и отступ всех HTML-элементов на странице на 0.

Некоторые браузеры могут уже делать это по умолчанию, но всегда полезно попробовать сбросить все вручную, на всякий случай.

Фактически, многие веб-сайты содержат файл reset.css (или аналогичный), при открытии которого вы заметите множество правил для сброса всего в каждом браузере.

Это означает применение этих стилей ко всем элементам.

Устанавливает маржу всех элементов равной 0.

Источник