Как добавить селектор в css

Создание селектора

тоже самое, что предлагал @Дмитрий Клименко (его ответ ниже). > Тут вся фишка в том, что я не знаю как глубоко и во что будет «зарыта» ссылка.

18 мая 2014 в 13:25

$('#root > li').find('a:first').css('color','red');

Отслеживать
ответ дан 18 мая 2014 в 14:57
34k 1 1 золотой знак 31 31 серебряный знак 49 49 бронзовых знаков
С jquery это работает. А в css только классы?
18 мая 2014 в 15:29

@alvoro, если уж извращаться, то по полной )) [Смотрим тут][1] #root > li > *:not(ul) a, #root > li > a < color: #f00; >P.S. Меня, кстати, сбили с толку предыдущие ответы и я думал, что надо именно для jQuery селектор подобрать. [1]:jsfiddle.net/Deonis/LdXrG/1

18 мая 2014 в 16:09
Вот теперь вообще сказка. Спасибо.
18 мая 2014 в 16:37

/*Link1*/#root>li span a <> /*Link2*/#root>li h1 a <> /*Link3*/#root>li>a <>

/*Link1*/#root li:nth-child(1) a <> /*Link2*/#root li:nth-child(2) a <> /*Link3*/#root li:nth-child(3)>a <>

Отслеживать
ответ дан 18 мая 2014 в 10:24
Дмитрий Клименко Дмитрий Клименко
760 3 3 серебряных знака 11 11 бронзовых знаков
Тут вся фишка в том, что я не знаю как далеко и во что будет «зарыта» ссылка.
18 мая 2014 в 10:32

css-selectors
css

Важное на Мете

Подписаться на ленту

Лента вопроса

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

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

CSS-селекторы: Способы задавать CSS-стили для HTML-элементов

CSS-селекторы — это специальные выражения описанные с помощью CSS (каскадные таблицы стилей), которые задают правила, как браузеру применять CSS-стили для HTML-элементов, которые определяются внутри блока CSS-стилей.

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

Видео Что такое CSS-селекторы: Способы задавать стили для HTML-элементов

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

Универсальный CSS-селектор * (звездочка)

С помощью универсального CSS-селектора * (звездочка) вы можете задавать правила какие CSS-стили применять сразу ко всем HTML тегам.

Пример кода, как задать с помощью универсального CSS-селектора * (звездочка) стили для всех HTML-элементов.

В итоге, ко всем HTML-тегам на странице, включая h1, span, div и другим применятся CSS-стили: размер шрифта 30px, цвет текста красный.

Универсальный CSS-селектор используется достаточно частно при создании верстки сайтов и вот почему. Дело в том, что пользователи используют различные браузеры: Google Chrome, Mozilla Firefox, Safari, Opera, Edge, различные мобильные браузеры и даже Internet Explorer старых версий. И каждый из браузеров может задавать свои CSS-стили для HTML-элементов по умолчанию. И та же HTML-форма будет выглядеть в разных браузерах по-разному.

И для того, чтобы ваш веб-сайт соответствовал макету дизайна сайта, обычно используют сброс стандартных стилей (reset css), которые задают браузеры. Reset CSS представляет набор CSS-стилей, который подключается к HTML-странице, в котором прописаны правила отображения для всевозможных HTML-элементов.

При применении Reset CSS или Normalize CSS, HTML-элементы выглядит примерно одинаково в большинстве браузеров.

CSS-селекторы по классу (Class selectors)

С помощью данного css-селектора вы можете задавать стили для HTML элементов у которых установлен тот или иной class.

Простой пример CSS-селектора по классу:

Запись CSS-стилей через точку «.» и без пробелов

Когда вы задаете CSS-стили через точку «.» и без пробелов (как в примере ниже) — это обозначает, что CSS-стили применятся ко всем тегам , у кого установлен класс .color. При этом, даже если у других html-элементов установлен class с именем .color, но этот html-элемент не является , стили к данному элементу не применятся и элемент с классом color не будет выделятся красным цветом.

А запись в виде div.color.text-color, когда без пробелов описывается несколько классов, обозначает, что стили применятся только к который имеет сразу два класса .color и .color-text и не применятся стили к к которому присвоен только один class с именем .color.

Запись CSS-стилей через запятую «,»

Запись CSS-стилей через пробел (space)

А так, с помощью CSS-селекторов (комбинатор потомков или descendant combinator), когда вы указываете в CSS-стилях элементы через пробел, вы можете применить стили к html-элементам, которые находятся внутри этих html-элементов вне зависимости от вложенности.

Запись CSS-стилей через знак больше «>»

При использовании комбинатора со знаком больше (>), CSS-стили задаются только для тех HTML-элементов, которые являются дочерними по отношению к задаваемому HTML-элементу.

Лучше понять как работает комбинатор “>” вам поможет пример.

Этот стиль применится только для первого потомка (child), но не будет работать для последующих:

А эти стили применятся для strong, потому-что strong — это прямой потомок :

Запись CSS-стилей через знак “~»

С помощью знака “~» можно выбирать все HTML-элементы, которые являются потомками указанного элемента.

Запись CSS-стилей через знак плюс «+»

Если c помощью записи CSS-стилей со знаком “~» можно выбирать все HTML-элементы, которые являются потомками(child) указанного элемента, то с помощью записи плюс “+” можно выбрать только один HTML-элемент.

И вот простой пример:

Запись CSS-стилей для HTML-элемента по атрибуту

Имея название HTML-атрибута, мы можем задавать стили для данного HTML-элемента. Ярким примером может служить и мы можем задавать CSS-стили исходя из атрибута.

Например у нас есть какая-то html-форма и мы хотим задать разные CSS-стили для с разными type: text и password. Когда мы будем печатать текст в с типом text мы хотим задать цвет текста «green», а для с типом password мы хотим задать цвет текста «magenta». И с помощью CSS-селекторов по атрибуту мы можем это сделать:

Для HTML-элементов можно задавать атрибуты, которые мы можем и сами придумать. Атрибуты задаются для различных целей, когда нужно запрограммировать определенное поведение. И мы им также может задавать CSS-стили:

Вывод

Пользоваться CSS-селекторами достаточно просто и самое главное — это практика, тогда вы все очень быстро запомните! Курс HTML/CSS Advanced содержит в себе большое количество интерактивных упражнений, выполняя которые, вы будете быстрее запоминать пройденный материал.

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

С вами был Сергей Никонов, успехов в обучении!

Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

CSS: Селекторы

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

.text-bold

Свойство font-weight со значением bold установит жирное начертание текста. С этим свойством вы подробнее познакомитесь при изучении оформления текста. Сейчас самое главное — этот стиль будет применён и к параграфу, и к блочному элементу , так как они имеют один и тот же класс.

Ещё один уже знакомый селектор — селектор по тегу. Его назначение — установка стилей для всех тегов на странице. Это очень полезно, если нужно установить первоначальные стили для тегов в рамках всего проекта. Например, установить шрифт, его размер и насыщенность.

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

Ещё одним способом указать стили является использование селектора по идентификатору. Используя атрибут id , можно указать уникальное имя для любого элемента на странице. Если данное имя указано, то к элементу возможно обратиться используя селектор по идентификатору. Для этого используется селектор вида #имя_идентификатора

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

Задание

В редакторе создайте параграф с идентификатором red и классом bold. Установите следующие свойства:

Для идентификатора red установите красный цвет текста
Для класса bold установите жирное начертание текста

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Селекторы тегов

В качестве селектора может выступать любой тег HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и т. д. Правила задаются в следующем виде.

Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 7.1).

Пример 7.1. Изменение стиля тега абзаца

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Селекторы тегов   Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.

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

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

Вопросы для проверки

1. В какой строке содержится ошибка?

2. Таня для фона веб-страницы и цвета текста выбрала цвета #ffe9f2 и #6e143b и в стилях использовала следующий код, однако нужные цвета не проявились. В чем причина?

body background-color: #ffe9f2
color: #6e143b
>

body написан строчными буквами.
Свойство background-color неверное, следует писать background.
Значения цветов указаны неправильно.
В качестве селектора применять body некорректно.
Не хватает точки с запятой.

3. Какая строка написана правильно?

4. К какому селектору следует применить свойство margin, чтобы изменить отступы на веб-странице?

5. Как добавить фоновый цвет ко всем элементам ?

Ответы

2. Не хватает точки с запятой.

Читать:

Как перенести контакты с android на ios