Селектор типа элементов css. Селекторы. Наследование и каскад

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

  • Селектор - это HTML-тег, к которому будет применяться стиль. Это может быть любой тег, например,

    или и т.д.
  • Свойство - это тип атрибута HTML-тега. Проще говоря, все атрибуты в HTML преобразуются в свойства CSS. Ими могут быть цвета, границы, отступы и т.д.
  • Значение - задается свойству. Например, свойство цвета может иметь значение green, #008000 и т.д.

    • Синтаксис селекторов в CSS следующий:

    Селектор { свойство: значение }

    Пример. Вы можете задать границу таблицы следующим образом:

    Table { border: 2px solid #FF8C00; }

    Здесь синтаксис селектора такой: table - это селектор, а border - свойство, а 2px solid #FF8C00 - значение этого свойства.

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

    Стандартные селекторы

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

    H1 { color: #8B4513; }

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

    Вместо того, чтобы выбирать элементы определенного типа, универсальный селектор вполне просто соответствует имени любого типа элемента:

    * { color: #808080; }

    Это правило отображает в нашем документе содержимое каждого элемента в сером цвете.

    Селекторы потомков или вложенные селекторы

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

      .

      Ul em { color: #CD5C5C; }

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

      Вы можете задать правила стиля для элементов на основе атрибута class. Все элементы, имеющие этот класс, будут отформатированы в соответствии с определенным правилом.

      Blue { color: #0000FF; }

      class="blue" . Вы можете сделать селектор класса немного более конкретным. Например:

      H1.blue { color: #0000FF; }

      с атрибутом class="blue" .

      Вы можете применить к одному элементу несколько селекторов класса. Рассмотрим следующий пример:

      Этот абзац будет оформлен классами center и bold .

      ID селекторы

      Вы можете задать правила стиля для элементов на основе атрибутa id. Все элементы, имеющие этот идентификатор, будут отформатированы в соответствии с определенным правилом.

      #blue { color: #0000FF; }

      Это правило отображает в нашем документе содержимое в синем цвете для каждого элемента с атрибутом id="blue" . Вы можете сделать id селектор немного более конкретным. Например:

      H1#blue { color: #0000FF; }

      Это правило отображает содержимое в синем цвете только для элементов

      с атрибутом id="blue" .

      Истинная мощность id селекторов - это когда они используются в качестве основы для селекторов-потомков, например:

      #blue h2 { color: #0000FF; }

      В этом примере все заголовки второго уровня будут отображаться в синем цвете, когда они будут находиться в тегах с атрибутом id="blue" .

      Дочерние селекторы

      Вы уже знаете селекторы потомков. Существует еще один тип селектора, который очень похож на селекторы потомков, но имеет другую функциональность, это дочерний селектор. Рассмотрим следующий пример:

      Body > p { color: #0000FF; }

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

      или

    Соседние селекторы

    HTML-элементы, идущие друг за другом, называются соседними. Рассмотрим следующий пример:

    Strong + em { color: #0000FF; }

    Это правило будет отображать содержимое тега в синем цвете, если он идет после элемента . Другие теги , идущие не после тега , не будут иметь никакого эффекта этого правила.

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

    Вы также можете применять стили к HTML-элементам с определенными атрибутами. Ниже правило стиля будет соответствовать всем input элементам, имеющим атрибут type со значением text:

    Input { color: #0000FF; }

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

    Для селектора атрибутов применяются следующие правила:

    • p - выбирает все элементы абзаца с атрибутом lang.
    • p - выбирает все элементы абзаца, где атрибут lang имеет точное значение «ru».
    • p - выбирает все элементы абзаца, где атрибут lang содержит слово «ru».
    • p - выбирает все элементы абзаца, где атрибут lang содержит значения, которые являются точными «ru» или начинаются с «ru».

    Несколько правил стиля

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

    H1 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }

    Все пары свойств и значений разделяются точкой с запятой (;). Вы можете сохранить их в одной строке или нескольких строках. Для лучшей читаемости сохраняйте их в отдельных строках.

    Не беспокойтесь о свойствах, упомянутых в вышеупомянутом блоке. Эти свойства будут объяснены в следующих уроках.

    Группировка селекторов в CSS

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

    H1, h2, h3 { color: #00CED1; letter-spacing: .2em; text-transform: lowercase; margin-bottom: 2em; font-weight: 700; }

    Это правило стиля будет применено к элементам h1, h2 и h3. Порядок списка при группировки селекторов не имеет значения. Все элементы в селекторе будут иметь соответствующие объявления, применяемые к ним.

    Вы можете группировать различные id селектора вместе, как показано ниже:

    #header, #content, #footer { position: absolute; width: 300px; left: 250px; }

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

    1) .Х

    .topic-title { background-color: yellow; }

    CSS селектор по классу Х . Разница между id и классом в том, что один и тот же класс может быть у нескольких элементов на странице, а id всегда уникален. Классы стоит использовать для применения одного и того же стиля к нескольким элементам.

    • Chrome
    • Firefox
    • Safari
    • Opera

    2) #X

    #content { width: 960px; margin: 0 auto; }

    CSS селектор по id . Знак решетки перед CSS селектором Х выбирает элемент у которого id = Х. Навешивая стили по id всегда стоит помнить, что он должен быть уникальным – только один такой id должен быть на странице. Поэтому лучше использовать селекторы по классам, комбинациям классов или названиям тэгов. Тем не менее, селекторы по id отлично применяются в автоматизированном тестировании, т.к. позволяют сразу взаимодействовать именно с нужным элементом и иметь уверенность что он только один такой на странице.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    3) *

    * { margin: 0; padding: 0; }

    CSS селектор всех элементов . Символ звездочки выбирает все элементы которые есть на странице. Многие разработчики используют его для того, чтобы убрать (обнулить) значения отступов (margin и padding) у всех элементов страницы. Тем не менее, на практике лучше так не делать потому, что этот CSS селектор довольно сильно грузит браузер перебором всех элементов на странице.

    Символ * также можно использовать чтобы выделить все дочерние элементы:

    #header * { border: 5px solid grey; }

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

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    4) X

    a { color: green; } ol { margin-left: 15px; }

    CSS селектор типа . Как выбрать все элементы одного типа, если у них нет ни id ни классов? Стоит использовать CSS селектор по типу элемента. К примеру, чтобы выбрать все упорядоченные списки на странице, используйте ol {...} как это показано выше.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    5) Х Y

    li a { font-weight: bold; text-decoration: none; }

    CSS селектор потомков или CSS селектор дочерних элементов используется чаще всего. Его используют если необходимо выбрать элементы определенного типа из множества дочерних элементов. Например, нужно выделить все ссылки, которые находятся в элементе li. В этом случае используйте этот селектор. Используя цепочки таких селекторов, всегда спрашивайте себя, а можно ли для выделения данного элемента использовать еще более короткую последовательность селекторов.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    6) Х + Y

    div + p { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 18px; }

    Смежный селектор элементов выбирает только элемент типа Y, который идет сразу после элемента Х. В этом случае каждый параграф следующий сразу после каждого элемента div будет получать специальный тип и размер шрифта.

      Какими браузерами поддерживается:
    • IE7 +
    • Firefox
    • Chrome
    • Safari
    • Chrome

    7) Х > Y

    #content > ul { border: 1px solid green; }

    CSS селектор потомков . Разница между селекторами Х Y и X > Y в том, что рассматриваемый CSS селектор будет выбирать только непосредственные дочерние элементы (выберет только прямых потомков). К примеру:

    • Элемент списка
      • Потомок первого элемента списка
    • Элемент списка
    • Элемент списка

    CSS селектор #content > ul выберет только ul, который является прямым потомком блока div с id="container" . Он не выберет ul, являющийся потомком первого li. Это достаточно выгодный по скорости работы CSS селектор.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    8) Х ~ Y

    ol ~ p { margin-left: 10px; }

    Селектор сестринских (саблинговых) элементов менее строгий чем X + Y. Он выберет не только первый, но и все остальные элементы p, идущие за ol.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera
    a:link { color: green; } a:visited { color: grey; }

    Псевдо-класс:link используется для выбора всех ссылок, на которые еще не кликнули. Если же нужно применить определенный стиль к уже посещенным ссылкам, то для этого используется псевдо-класс:visited .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    10) X

    a { color: red; }

    CSS селектор по атрибуту . В этом примере выбираются только те ссылки, у которых есть атрибут title.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    11) X

    a { color: yellow; }
      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    12) X

    a { color: #dfc11f; }

    Звездочка означает, что искомое значение должно быть где-нибудь в атрибуте (в любой части атрибута href). Таким образом, будут выбраны и ссылки с https://www..stijit.. Ко всем выбранным ссылкам будет применен золотой цвет.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    13) X

    a { background: url(path/to/external/icon.png) no-repeat; padding-left: 15px; }

    На некоторых сайтах рядом со ссылками, ведущими на другие сайты, проставлены небольшие иконки со стрелочками, чтобы показать что это внешние ссылки. Карат “^” – это символ для обозначения начала строки. Таким образом для выбора всех тэгов, у которых href начинается с http, нужно использовать CSS селектор с каратом, как это показано на примере выше.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    14) X

    a { color: green; }

    Здесь используется регулярное выражение и символ $ для того, чтобы обозначить конец строки. В данном примере мы ищем все ссылки, которые ссылаются на картинки с расширением.jpg.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    15) X

    a { color: green; }

    Здесь мы применяем CSS селектор по пользовательскому атрибуту . Добавляем наш собственный атрибут data-filetype в каждую ссылку:

    ссылка

    Теперь, с помощью приведеного выше CSS селектора, можно выбирать все ссылки ведущие на картинки с любым расширением.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    16) X

    Тильда (~) позволяет выделить определенный атрибут из списка атрибутов, разделенных пробелом. Можно прописать наш собственный атрибут data-info, в котором указывать несколько ключевых слов через пробел. Таким образом можно указать, что ссылка является внешней и ведет на изображение.

    ссылка

    С помощью такого приема мы можем выбирать элементы с нужными нам комбинациями атрибутов:

    /* Выбрать элемент, атрибут data-info которого содержит значение external */ a { color: green; } /* Выбрать элемент, атрибут data-info которого содержит значение image */ a { border: 2px dashed black; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    17) X:checked

    input:checked { border: 3px outset black; }

    Этот псевдокласс выделяет только такие элементы, как checkbox или radio button, причем только когда они уже в отмеченном состоянии.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    18) X:after

    Псевдоклассы:before и:after очень полезные – они создают контент до и после выбранного элемента.

    Clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }

    Здесь при помощи псевдо-класса:after после блока с классом.clearfix создается пустая строка, после чего очищается. Этот подход используется если невозможно применить свойство overflow: hidden .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    19) X:hover

    div:hover { background-color: rgba(11,77,130,0.5); }

    Применяет к элементу определенный стиль, когда на него наводится курсор мыши. Старые версии Internet Explorer применяют:hover только к ссылкам.

    A:hover { border-bottom: 1px dotted blue; }

      Какими браузерами поддерживается:
    • IE6+ (В IE6 применимо только к ссылкам)
    • Chrome
    • Firefox
    • Safari
    • Opera

    20) X:not(selector)

    div:not(#content) { color: grey; }

    Псевдокласс not (отрицания) бывает полезен когда, к примеру, нужно выбрать все div, за исключением того, который имеет id="content" .

    По такому же принципу можно выбрать все элементы кроме p:

    *:not(p) { color: blue; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    21) X::pseudoElement

    p::first-line { font-weight: bold; font-size: 24px; }

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

    Выбор первой буквы параграфа:

    P::first-letter { font-family: cursive; font-size: 30px; font-weight: bold; padding-right: 1px; }

    Выбор первой строки в параграфе:

    P:first-line { font-size: 28px; font-weight: bold; }

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera

    22) X:first-child

    ul li:first-child { border-top: none; }

    Псевдокласс first-child выбирает только первого потомка родительского элемента. Часто используется чтобы убрать border в первом элементе списка. Этот псевдокласс был еще начиная с CSS 1 .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari
    • Opera 3.5+
    • Android

    23) X:last-child

    ul > li:last-child { border-bottom: none; }

    Псевдокласс last-child выбирает последнего потомка родительского элемента. Он появился только начиная с CSS 3 .

      Какими браузерами поддерживается:
    • IE9+ (IE8 поддерживает first-child, но не last-child. Microsoft (с))
    • Chrome
    • Firefox
    • Safari
    • Opera 9.6+
    • Android

    24) X:only-child

    div p:only-child { color: green; }

    Псевдокласс only-child позволяет выбрать те элементы, которые являются единственными потомками для своих родителей.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox
    • Safari 3.0+
    • Opera 9.6+
    • Android

    25) X:nth-child(n)

    li:nth-child(3) { color: black; }

    Выбирает дочерний элемент по номеру, указанному в параметре. Селектор nth-child принимает целое число в качестве параметра, однако отсчет ведется c 1, т.е. если нужно выбрать второй пункт списка, используйте li:nth-child(2) . Все псевдоклассы с использованием nth-child появились только начиная с CSS 3 .

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    26) X:nth-last-child(n)

    li:nth-last-child(2) { color: red; }

    Если у вас большой список элементов в ul и нужно выбрать третий элемент с конца? Вместо того, чтобы писать li:nth-child(109) , можно использовать селектор последних потомков nth-last-child . Этот метод такой же как и предыдущий, но отсчет ведется с конца.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    27) X:nth-of-type(n)

    ul:nth-of-type(3) { border: 1px dotted black; }

    Если на странице есть четыре неупорядоченных списка и нужно применить стиль только к третьему из них, не имеющему уникального id, стоит использовать nth-of-type.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    28) X:nth-last-of-type(n)

    ul:nth-last-of-type(3) { border: 2px ridge blue; }

    Псевдокласс nth-last-of-type(n) предназначен для выбора n-ого элемента определенного типа с конца.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.6+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    29) X:only-of-type

    li:only-of-type { font-weight: bold; }

    Псевдокласс only-of-type выбирает элементы, не имеющие соседей в пределах родительского элемента. К примеру можно выбирать все ul, которые содержат только одинокие li.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.5+
    • Safari 3.1+
    • Opera 9.6+
    • Android 2.1+
    • iOS 2.0+

    30) X:first-of-type

    ul:first-of-type > li:nth-child(3) { font-style: italic; }

    Псевдокласс first-of-type выбирает первый элемент заданного типа.

      Какими браузерами поддерживается:
    • Chrome
    • Firefox 3.5+
    • Safari 3.1+
    • Opera 9.5+
    • Android 2.1+
    • iOS 2.0+

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

    CSS селектор – это составная часть CSS правила отвечающая за определение конкретных html тегов, к которым будут применены стили оформления, прописанные в этом правиле.

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

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

    Виды css селекторов

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

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

    Простые селекторы

    • Универсальный селектор – отвечает за выбор вообще всех элементов в документе. Задается звездочкой. Обычно применяется для обнуления стилей браузеров, установленных в них по умолчанию, чтобы у всех, кто будет заходить на сайт не уплыло оформление в случае использования каких-то собственных настроек браузера или же различных плагинов…

      * { какой- то стиль; }

    • Селектор типа – выбирает все теги, соответствующие определенному типу. Задается названием тега. Используется для задания общих правил оформления документа, к примеру, задать разные шрифты заголовкам и простому тексту документа.

      h1 { какой- то стиль; }

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

      LeftColumn { какой- то стиль; }

    • Селектор идентификатора – применяется для оформления уникальных элементов на странице. Задается решеткой после которой идет название id. Используется, если нужно оформить один конкретный элемент страницы.

      #alertButton { какой- то стиль; }

    • – выбирает теги у которых присутствует атрибут. Задается названием атрибута в квадратных скобках. Может использоваться как для оформления группы тегов в которых просто присутствует заданный атрибут, так и для группы тегов в которых присутствует заданный атрибут с определенным значением.

      [ type] { какой- то стиль; } [ type= "submit" ] { какой- то стиль; } input[ type= "submit" ] { какой- то стиль; }

    Сложные селекторы

    • Селектор потомка – выбор потомков (тегов находящихся внутри другого тега) элементов. Задается через пробел (родитель – пробел – потомок).

      div p { какой- то стиль; }

    • Селектор дочернего элемента - выбор элемента непосредственно вложенного в другой элемент. Задается символом «>» (родитель-галочка-дочерний элемент). Дочерний элемент отличается от потомка тем, что следует непосредственно после родителя (первый уровень вложенности). В то время как потомком считается любой тег внутри другого не зависимо от уровня вложенности.

      Sidebar> ul { какой- то стиль; }

    • Селектор сестринского элемента – выбирает тег идущий сразу после другого тега (не заключенный внутрь, а идущий далее). Задается плюсом (первый элемент – плюс – сестринский элемент). На практике используется редко. Обязательным условием применение является наличие общего родителя для всех элементов объединенным знаком «+».

      h1+ p { какой- то стиль; }

    Псевдоклассы и псевдоэлементы

    Вышеперечисленная классификация селекторов CSS зависела исключтиельно от разметки документа. Если мы хотим задать изменение внешнего вида элементов в зависимости от изменения его состояния на странице (к примеру смена цвета кнопки при наведении), то мы можем использовать селекторы псевдоклассов и псевдоэлементов .

    • Помните, что в отличие от html в CSS регистр букв имеет значение. Тоесть класс.active и.Active это не одно и то же! Они применятся к разным элементам, если таковые есть в документе.
    • Называйте селекторы для оформления так, чтобы потом в них не запутаться: .leftColumn – хорошее название, .left – зависит от ситуации, но уже неочень, .llll – фигня какаято, ты сам то скажешь не глядя на код откуда этот класс взялся?
    • Еще раз напоминаю – если элемент на странице один, такой весь уникальный, то для него используем id, если же есть вероятность, что появится еще один такой или же просто подобных элементов на странице несколько, то пользуйтесь для оформления классами.

    Подводя итоги

    Селекторы в CSS – это мощнейший инструмент идентификации определенных элементов страницы или же группы элементов объединенных конкретным признаком для дальнейшего применения к ним стилей оформления из блока объявлений относящегося к данному селектору.

    После освоения общих принципов взаимодействия и создания селекторов вы забудете о проблемах с оформлением веб-документов. Хорошее знание селекторов позволяет значительно сократить время верстки html страниц.

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

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

    Селектор по элементу

    До этого момента, мы с вами работали именно с этим селектором.Т.е. в качестве селектора использовалось непосредственно имя html элемента, к которому мы хотели применить данный стиль. Т.е. написав класс например для параграфа(Р) , все параграфы на странице приобретали стиль данного класса.

    P {
    font-size: 12px
    }

    А теперь представьте ситуацию, когда необходимо сделать первый параграф в одном стиле, второй в другом, третий в третьем и.т.д. Тут нам на помощь придет селектор по классу .

    Селектор по классу

    Давайте разберем как создать универсальный класс в CSS . А сделать это очень просто: сначала ставим точку, затем сразу, без пробела,пишем имя класса, ну а затем в фигурных скобках стиль. Ну например:

    .green {
    font-family: arial, verdana, sans-serif;
    font-size: 12px; color:green;
    }

    Как применить данный стиль?

    Допустим мы хотим применить данный стиль к определенному параграфу в документе. Вот как это будет выглядеть в html:

    class ="green "> ... текст параграфа...

    Как видите используется атрибут class со значением названия стиля. Понятно? вот вам еще примерчик:

    Это обычный параграф, для него используется селектор по элементу


    Class ="green "> Этот параграф зеленый, т.к к нему применили класс


    Class ="big_red " > А этот параграф большего шрифта и красный


    Этот параграф снова обычный, по классу селектора элемента

    p {
    font-family:arial,verdana,sans-serif;
    font-size:18px;
    }
    .green {color:green;}
    .big_red {
    font-size:28px;
    color:red;
    }

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

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

    Сделать так, чтобы класс действовал только на определенный элемент(например параграф) можно указав название элемента перед точкой:

    P.green {color:green;}

    Теперь класс green не будет действовать ни на что другое, кроме элемента P.

    Наверх

    Селектор по id

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

    html- часть:

    <Н1 id ="firstheader "> Первый заголовок на странице

    css - часть:

    H1 #firstheader { color: red; font-weight: bold; text-align: center }

    Как видите в html-части вместо атрибута class здесь употребляется атрибут id , а в css - вместо точки употребляется знак #.

    В принципе, то же самое можно сделать и с использованием селектора по классу, это уже кому как больше нравится:)

    Наверх

    Контекстный селектор

    Это очень полезная вещь. Допустим у нас есть страничка с таблицами и параграфами текста, причем и в таблице, и в параграфах встречаются выделенные жирным шрифтом(strong) слова. И вот, нам резко понадобилось сделать так, чтобы слова, в параграфе, которые выделены жирным стали зеленого цвета. Так вот.

    Селекторы
    Селекторы в языке CSS

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

    Селектор (от англ. selector) — сортировка, выборка. Под селекторами, в языке CSS понимается способ выборки элементов (тегов) страницы.

    Как мы знаем из , схема CSS-кода выглядит следующим образом:

    Селектор { CSS-свойство: значение; CSS-свойство: значение; ... и т.д. }

    Виды CSS-селекторов

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

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

    Основные виды селекторов CSS

    1. Селектор тега — выбор элемента страницы по имени его тега имяТега { }
    2. Селектор class — выбор элемента страницы по имени его класса.имяКласса { }
    3. Селекторы id — выбор элемента страницы по имени его уникального идентификатора #имяУникальногоИдентификатора { }

    Взаимоотношения между селекторами CSS

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

    1. Контекстные селекторы — выбор элементов потомков селектор селектор { } (между селекторами ставят пробел).
    2. Дочерние селекторы — выбор дочерних элементов селектор > селектор { } (между селекторами ставят знак больше).
    3. Соседние селекторы — выбор соседних (братских, сестринских) элементов селектор + селектор { } (между селекторами ставят знак плюс).

    Если что не понятно, не переживайте, каждый селектор и их взаимоотношения мы рассмотрим отдельно, в статьях посвященных только им, вот только допишу эти статьи 🙂

    Селекторы атрибутов и значений

    Селекторы атрибутов и значений — выбирают элементы по их атрибуту или атрибуту и значению.

    1. Селектор атрибута — выбор элемента по имени атрибута [атрибут] { }
    2. Селектор атрибута и значения — выбор элемента по имени его атрибута и значения [атрибут = "значение"] { }

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

    В CSS-коде, универсальный селектор записывают как символ звёздочка * Универсальный селектор необходим для того,
    чтобы задать CSS-свойства сразу всем элементам страницы. Обычно его используют для того чтобы обнулить отступы у элементов, пример:

    * { margin:0; padding:0; }

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