Подписка
Email
Fb
RSS
Twitter
Email

Селекторы CSS

Привет всем читателям блога DenWeb.Ru. CSS является мощным инструментом для веб разработки. Он позволяет воплощать в жизнь практически все наши задумки и идеи.

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

Существует несколько видов CSS селекторов. Перейдем к рассмотрению этих видов и примеров их применения.

Универсальный селектор

Универсальный селектор задает стиль всем элементам документа. Обозначается символом звездочки (*). Например, данное определяет, что все элементы будут иметь красный цвет:

 * {color: red;}

Селекторы элементов

Когда пишутся стили для HTML документа, то в качестве элементов выступают HTML теги (h1, p, img, a, body...). Например:

h1 {
	font-family:Verdana;
	font-size:12px;
	color:#666;
} 

В данном случае все заголовки первого уровня в документе будут иметь шрифт Verdana, размер 12px и серый цвет.

Селекторы классов

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

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

<img class="border_img" src="site.ru/img.png" />
 

А в файле стилей пишем правило:

 .border_img {border:1px solid #00f;}

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

<a class="logo shadow" href="#">Ссылка</a>

Селекторы идентификаторов

Тоже позволяет назначить стиль независимо от типа элемента. Но, в отличии от селектора классов, может использоваться в документе только один раз. Обозначается символом решетки (#). У тега прописывается атрибут id. Например:

<div id="menu">...</div>

 

#menu {
	width:25%;
	background-color:#ccc;
	float:left;
}

Селекторы атрибутов

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

Для выбора элемента по его атрибуту, независимо от значения этого атрибута используется следующая конструкция: [атрибут]. Например, нам понадобилось отметить красной рамкой изображения у которых задан атрибут alt. Делаем так:

 <img src="site.ru/img.png" alt="Image" />

 

img[alt] {border:1px solid red;}

Можно выбрать только те теги, атрибуты которых имеют определенное значение. Нужно, например, ко всем тегам с атрибутом type, значение которого text, применить правило — размер текста 16px. Делается следующим образом:

 [type="text"] {font-size:16px;}

Если нужно выбрать элементы, атрибут class которых содержит слово img, то используется такой код:

 [class~="img"] {margin:5px;}

Если нужно выбрать атрибут, значение которого начинается с какого-либо текста:

[href^="http://"] {color:#009}; 

Если нужно выбрать атрибут, значение которого заканчивается на какой-либо текст:

 [href$=".com"] {font-size:10px;}

Если нужно выбрать атрибут, значение которого содержит какой-либо текст:

[title*="man"] {background-color:#0cc;} 

Селекторы потомков (контекстные селекторы)

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

 <p>Выделяем <a href="#">красным</a> ссылки, которые <span><a href="#">находятся</a></span> внутри параграфа.</p>

 

p>a {color:red;} 

Красной станет только первая ссылка, так как вторая не является дочерней -она дочерняя к тегу span. Если же не имеет значения — дочерняя это ссылка или нет, то применяется следующая запись:

p a {color:red;} 

Тут уже обе ссылки будут красного цвета.

Селекторы сестринских (соседних) элементов

Для выбора соседних элементов, расположенных на одном уровне, имеющих одного родителя делаем так:

 <p>Для выбора <strong>элементов</strong>, <em>расположенных</em> на одном уровне, <a href="#">имеющие одного родителя</a> делаем так.</p>

 

strong + em {font-style:italic;}

Соседними в данном случае являются теги strong и em, а так же em и a.

Селекторы псевдоклассов

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

Например, нужно изменить цвет посещенных ссылок:

 a:visited {color:#933;}

Или, например, изменить цвет текста при фокусе (установке курсора) на текстовом поле формы:

input:focus {color: red;} 

Селекторы псевдоэлементов

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

В CSS2 определено 4 псевдоэлемента: первая буква (:first-letter), первая строка (:first-line) и применение специальных стилей до (:before)и после (:after) элемента.

Зададим, к примеру, первой букве каждого абзаца свой стиль:

p:first-letter {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #333;
}
 

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

Вы можете оставить комментарий.

35 комментариев к записи “Селекторы CSS”

  1. никита:

    Большое спасибо за видео HTML на ютубе!!!

    P.S.Когда запишите видео о CSS??Испытываю острую необходимость!))))

  2. admin:

    Уже завтра первый урок выложу

  3. Огромное тебе спасибо!

    Делаю сайт (из чужого шаблона) и вот с CSS мучался не понимая че к чему...

  4. Олег:

    Понятно только про «универсальный селектор» и «селекторы элементов», а остальное чет никак не доходит, раз 5 перечитал. По буквам сложновато что-то понимать, хорошо помогает видео уроки))) Спасибо!

  5. А ты сам как учился вебмастерству? тож по таким урокам, реально вообще на должный уровень выйти с такими методами обучения?

    • admin:

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

      Лучше всего для начала сделать себе сайт и практиковаться на нем. Я например изучал html и css по книжке и параллельно делал сайт (простенький, из нескольких страниц).

      Главное хорошо знать CSS и HTML (для верстальщика), ну и некоторые приемы верстки, остальное с опытом приходит. В своих уроках я стараюсь объяснить все, что реально используется при верстке сайтов.

  6. Ты стараешься рассказать максимум о CSS и HTML большому количеству людей, так сказать для общества, а существует ли такой вариант, как отдельное обучение одного человека или несколько? В этом можно найти выгоду не только ученикам, вариантов довольно много.

    Скажи что ты об этом думаешь и возможен ли такой вариант?

  7. admin:

    Пробовал я и такой метод.

    Один мой знакомый тоже захотел создать себе сайт и попросил обучить его. Я согласился. Но для того, чтобы изучить html, css нужно самому обучаемому учить все теги, атрибуты, свойства... Я дал ему нужные книги. С моей стороны обучение заключалось лишь в объяснении непонятных вещей, которые он спрашивал.

    Думаю, что индивидуальный подход может быть таким. Большую часть нужно учить самому.

    Если возникают какие-то вопросы, то я всегда постараюсь ответить.

    Можно писать через форму на этой странице.

  8. Володя:

    Прочитал статью и понял, что называя себя «чайником», я делаю себе комплимент...

  9. pasha:

    Я не понял первый урок css !)Ты там показуеш готовый стиль!)а как зделать документ styl.css???????Ты не мог бы выложить видео после html  чтоб лучши понять.

  10. Pitersburg:

    Отличная статейка! Закончил годовые курсы, но мне этого показалась мало))) Хочется что бы от зубов отлетало и такие сайты как Ваш, мне в этом помогут)) Пасиб большое, респект)))

  11. Smeshnaya:

    Начиная с Селекторов потомков, начинаю путаться и не понимать многие моменты...Прошла все Ваши уроки по HTML, многое в моей голове встало на свои места, теперь буду осваивать CSS, думаю это мне очень поможет, по крайне мере начинаю понимать основные вещи :)

  12. Денис, в разделе Селекторы классов есть такая строка:<a class="logo shadow" href="#">Ссылка</a>Между «logo» и «shadow» не должно быть подчеркивания, или ошибка?

    • Роман, здесь все верно. Названия классов написаны через пробел, т.е. к элементу a применяется и класс logo и класс shadow.

  13. я очень рада что нашла етот сайт и купила домен хостинг и в данный момент создайу свой сайт работы много но уроки Дениса проста супер!

  14. бедный админ ))) замучили вопросами. но и комплиментами не обделили.  Мне пока-что нравится ход этого курса. Заметил люди пишут, что не понимают что-то. Но админ правильно написал... Просто читать это пол дела. Надо пробовать самому сделать. И гугл нам в помощь! ))

  15. Дмитрий:

    Привет, подскажи, можно ли сделать так чтобы стиль применялся, например, к элементу img, который находится в таблице c id='someth', а та в свою очередь находится в div-e c id='content' .но к такому же сочетанию вне div (id='content') не применялся Очень надо

  16. Александр:

    Как сделать что-бы стиль применялся только для тех элементов у которого заданы одновременно два класса (определённых) (для тех элементов у которых не заданы 2 класса (только какой-то один из них) свои стили) без добавления 3-го класса?

    • Допустим есть 2 класса — class1 и class2, и есть элемент, которому заданы эти 2 класса:

      <p class="class1 class2">Текст</p> 

      тогда будет так:

       .class1.class2 {стили}


  17. Никита:

    Ден а ты в CSS уроках будеш объеснять о селекторах? ато я тут перечитывал несколько раз а понел только о унивесальном селекторе.

  18. Дима:

    Денис, а вот эти параметры:width, background-color, border...Есть какой нибудь справочник по ним? А то не запоминаются сразу все (

    • Михаил:

      htmlbook.ru/css — норм справочник на русском по css свойствам. Там есть и справочник по тегам и атрибутам html. Плюс данные о поддержке браузерами.

  19. Джахон:

    Большое спасибо за Ваш труд! Мне тоже по началу было сложно понять про селекторы, но по прохождении 2−3 уроков по CSS и повтроном изучении данного матреиала все стало проясняться.

  20. Андрей:

    Здравствуйте.Скажите, как связать html c css ?Спасибо.

  21. Артём:

    Возможно я и ошибаюсь, но не забыли ли Вы дописать закрытие тега </p> в пункте «Селекторы потомков»?

  22. Хорошая структура представления материала. Наглядно и хорошо усваивается. Буду применять такой стиль на своих сайтах. Спасибо!

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика