Селектор
Селе́ктор
(лат. selector сортировщик)
1) электромеханический прибор для приема вызова в телефонной сети диспетчерского управления; повсеместно выходит из употребления, заменяется более совершенной системой вызова;
2) с. импульсов - устройство для выделения импульсов определенной величины или длительности из имеющейся последовательности импульсов; примен. в автоматике, вычислительной технике, радиотехнике;
3) С. нейтронов - прибор для выделения нейтронов с определенной энергией из пучка медленных нейтронов.
Новый словарь иностранных слов.- by EdwART, , 2009 .
Селектор
[] – особое устройство в телефонном аппарате с поляризованными магнитами, которое реагирует на строго определённые выбранные импульсы электрического тока.
Большой словарь иностранных слов.- Издательство «ИДДК» , 2007 .
Селектор
а, м.
( лат.
sēlēctor производящий отбор).
1.
Электромеханический прибор, при помощи которого автоматически осуществляется в нужном направлении и с нужными пунктами телефонная связь, управление технологическими процессами и т. п. Вызвать кого-н
. по селектору
.
2.
В сочетании: селектор импульсов (рад.
, тех.
) - устройство для выделения из имеющейся последовательности импульсов
только таких, которые соответствуют заданным параметрам (определенной частоте, амплитуде и т. п.).
Толковый словарь иностранных слов Л. П. Крысина.- М: Русский язык , 1998 .
- (англ. selector) число, хранящееся в сегментном регистре; это 16 битная структура данных, которая является идентификатором сегмента. Селектор указывает не на сам сегмент в памяти, а на его дескриптор, в таблице дескрипторов… Селектор… … Википедия
Искатель, переключатель, дешифратор; групповыбиратель Словарь русских синонимов. селектор сущ., кол во синонимов: 1 групповыбиратель (1) … Словарь синонимов
СЕЛЕКТОР - (1) радиоэлектронное устройство, осуществляющее селекцию (см.) входных сигналов по определённым параметрам. Различают С.: а) амплитудный узел телевизионного приёмника, предназначенный для выделения из полного телевизионного сигнала сиихросмеси,… … Большая политехническая энциклопедия
- (от лат. selector сортировщик) электромеханическое устройство для приема сигналов в избирательной телефонной связи преимущественно на железнодорожном транспорте. С 60 х гг. 20 в. заменяется более совершенной системой тонального избирательного… … Большой Энциклопедический словарь
СЕЛЕКТОР, а, муж. Электромагнитный аппарат, включённый в сеть с другими аппаратами для осуществления оперативной телефонной связи нескольких пунктов с центром. Связь по селектору. | прил. селекторный, ая, ое. Толковый словарь Ожегова. С.И. Ожегов … Толковый словарь Ожегова
селектор - а, м. sélecteur m. < selector < seligo отбираю. Электромагнитный аппарат для одновременного телефонного вызова нескольких ли всех абонентов данной линии; вся система избирательной связи. БАС 1. За пятьсот километров от бухты все совбодные… … Исторический словарь галлицизмов русского языка
селектор - Идентификатор, используемый машиной протокола OSI (entity) для обозначения многочисленных SAP, обеспечивающих сервис для вышележащего уровня. Тематики информационные технологии в целом EN selector … Справочник технического переводчика
А; м. [от лат. selector сортировщик] Электронный аппарат для одновременного телефонного вызова нескольких или всех абонентов какой л. линии; вся система телефонной избирательной связи на промышленных предприятиях, в сфере транспорта и т.п.… … Энциклопедический словарь
селектор - atrinktuvas statusas T sritis automatika atitikmenys: angl. selector vok. Selektor, m; Wähler, m rus. селектор, m pranc. sélecteur, m ryšiai: sinonimas – selektorius … Automatikos terminų žodynas
селектор - atrinktuvas statusas T sritis fizika atitikmenys: angl. selector vok. Selektor, m; Wähler, m rus. селектор, m pranc. sélecteur, m … Fizikos terminų žodynas
CSS селекторы – одна из главных особенностей языка CSS. Селекторы позволяют обратиться как к группе элементов, так и к только одному из них.
Селекторы нужны для того, чтобы указать браузеру, к каким элементам применять стили, описанные в фигурных скобках.
P{ стили… }
В данном случае селектором выступает p – тег абзацев. Такое правило добавит стили для всех абзацев на веб-странице.
Селектор тега – самый простой
. Он был продемонстрирован в примере. Чтобы записать его в css, нужно написать имя тега без угловых скобок. Стили будут применены ко всем элементам с таким тегом.
table{} – стили для всех таблиц
li{} – стили для всех пунктов списка
a{} – стили для всех ссылок
Стилевой класс
– к любому элементу на веб-странице можно привязать стилевой класс. Даже к одной букве. Потом в css-файле можно обратиться к этому элементу, прописав для него собственные стили. Для этого нужно поставить точку и написать имя стилевого класса после нее. Примеры:
.about{} – правила применятся ко всем элементам, которые имеют атрибут class = "about"
.down{} – правила применятся ко всем элементам, которые имеют атрибут class = "down"
.float{} – правила применятся ко всем элементам, которые имеют атрибут class = "float"
Как видите, главное поставить точку. Стилевой класс можно привязывать к неограниченному количеству элементов. Элементу можно прописать несколько классов.
Идентификатор – еще один вид селекторов. Один идентификатор можно задать только одному элементу. Он не может иметь двух идентификаторов, а также id привязанный к этому элементу, не может быть прописан нигде более.
Задается он так:
Абзац
То есть также, как и класс, только используется атрибут id в качестве значения которого используется любое слово.
Чтобы обратиться к элементу с идентификатором через css нужно написать значение id и перед ним поставить решетку.
#first{ font-size: 22px }
Мы обратились к абзацу с id = first . Стиль применится только к нему. У остальных абзацев размер шрифта не изменится.
В CSS есть один интересный вид селекторов – псевдоклассы. То есть классы, которые по умолчанию есть у элементов и их не нужно дополнительно задавать. Некоторые из них работают только для ссылок, а некоторые можно применить ко всем элементам. В любом случае css псевдоклассы сильно облегчают работу веб-разработчику.
Псвевдокласс – это стилевой класс элемента, который мы на самом деле не задавали сами, просто он есть сам по себе. Например, увидев в html такой код:
Абзац
Вы абсолютно точно можете сказать, что у этого абзаца есть класс special , потому что он там прописан. Но псевдоклассы не нужно писать, они есть у элементов по умолчанию и в этом их преимущество в данном случае. Далее давайте рассмотрим самые популярные из них.
:focus – стиль применяется к элементу, который получает фокус ввода.
На самом деле для полей ввода появилось очень много новых классных псевдоклассов, но все они впервые введены в CSS3
, а в этой статье я хотел бы обсудить только самые простые. О CSS3 селекторах обязательно будет статья в дальнейшем.
Это не все псевдоклассы, но самые популярные и необходимые. Собственно, все псевдоклассы помечаются в css одинаково, через двоеточие. К тому же можно комбинировать селекторы и получать интересные возможности:
a:visited:active – стили для уже посещенной ссылки, на которую кликают.
div:first-child:hover – стили для всех первых блоков в их родителях, на которые наводят курсор.
Как видите, такие селекторы дают большие возможности в плане стилизации элементов. Используйте их и сможете без труда дотянуться до любых элементов.
Еще одно важное правило, о котором нужно знать. Селекторы стилевых классов можно записать, не отделяя их друг от друга. Например:
.class1.class2 – выберет те элементы, у которых есть оба этих класса.
.class1.class3.class8 – выберет элементы, к которым привязаны все три стилевых класса.
Если отделять селекторы друг от друга пробелами, то можно оттянутся до нужного нам элемента. Примеры:
table td – выберет все ячейки, лежащие в таблицах
ul li a – выберет все ссылки, лежащие в пунктах списков (а пункты списков в свою очередь лежат в самих списках)
.class1 p – выберет все абзацы с атрибутом class = “class1”
.class2 p span – выберет все содержимое тегов, лежащее в абзацах с классом class2.
Вкладывать и комбинировать таким образом можно сколько угодно раз. Примеры:
#header .logo span:first-letter{}
– выберет первую букву в спане логотипа, который расположен в шапке
.class1.class2:hover{} – определит стиль при наведении мышки для элементов, которые имеют оба стилевых класса.
Если вам нужно задать стили для элементов родителя, которые являются НАПРЯМУЮ дочерними
, то нужно прописать это так:
ul > li{} – выберет пункты списка, которые вложены в него напрямую, а не лежат в других тегах
p > a{} – выберет только те ссылки в абзацах, которые лежат непосредственно в них, а не вложены в другие теги (которые, в свою очередь, уже вложены в абзацы)
Пример:
Если прописать такой селектор p > a , то применятся ли стили к ссылке в вышеприведенном примере? Нет, потому что она еще вложена в другой тег, то есть не является напрямую дочерней.
Последнее, что мы сегодня рассмотрим. Если прописать в css так:
.class1 + .class4 {} , то этот селектор выберет элемент с атрибутом class = "class4" , и этот элемент должен стоять в HTML-коде сразу же за элементом с классом class1. Только в этом случае все будет работать. Опять же рассмотрим на примере:
Сработает ли вышеуказанный селектор (.class1 + .class4 {})? Нет, потому что элементы не стоят рядом. Между ними находится тег img . Вот если его удалить, тогда все заработает.
Итак, мы с вами рассмотрели самые основные и наиболее простые селекторы. Наверняка этих знаний вам хватит, чтобы решить 95% проблем. В следующей статье я опишу некоторые более специфические css селекторы.
Позволяют выбрать определенные элементы, не привязывая к ним стилевой класс или идентификатор.
Селекторы атрибутов, это те селекторы, в которых в квадратных скобках записывается атрибут, либо атрибут со значением. Несколько примеров, чтобы было понятно:
* – выбирает все элементы, которые имеют атрибут href с любым значением.
input – выбирает все input-элементы, у которых есть атрибут disable (все отключенные поля).
input – выбирает все поля, тип которых password , то есть поля для ввода пароля.
img – выбирает картинку, у которой задан атрибут src = "/logo.png" .
Как видите, прописывать css селекторы атрибутов не так уж и сложно. Их самое главное отличие – квадратные скобки, в которых записывается либо просто атрибут, либо атрибут с его точным значением. Но на этом функционал этих селекторов не заканчивается.
Все нижеперечисленные селекторы чувствительны к регистру.
Поиск в начале строки
div – выбирает все div-ы, у которых есть стилевой класс, начинающийся на "block" . Таким образом, будут выбраны, например, такие блоки: "block-head", "block-3", "blocknote" . Главное, чтобы в начале значения было ключевое слово.
Поиск в конце строки
a – выбирает все ссылки, у которых адрес заканчивается на.rar . Таким образом, если у вас на сайте можно что-то скачать, то вы можете добавить иконку рядом со всеми ссылками на архивные файлы.
Поиск подстроки везде в значении
span – выберет все теги span, у которых в имени класса в любом месте этого имени содержится “art”. Таким образом, будут выбраны, например, спаны с такими классами: party, clart, art-1.
Поиск префиксов
p – выберет абзацы со стилевым классом, которые имеют имя, либо точно совпадающее с “first”, либо содержащие префикс first- , с которого начинается имя класса.
Поиск слов внутри значения
input
– выберет все элементы input, в которых значение атрибута идентификатора содержит в себе слово text . Его отличие от поиска подстроки везде отличается тем, что входить должно именно слово, а не подстрока.
Последние два варианта редко где применяются и едва ли вам часто пригодятся, но для общего развития все-таки можно о них знать.
С помощью подобных селекторов можно выбирать многие html-элемента, не задавая им стилевых классов. В некоторых случаях благодаря такому способу можно сократить код и упростить себе работу. Например, выше я приводил пример с иконкой для архивов. Тут появилась еще одна идея. Например, на своем сайте вы часто ссылаетесь на один другой ресурс (википедию, скажем) и хотите рядом с ссылками на википедию отображать специальную иконку, которой у других ссылок быть не должно.
Реализовать это можно так:
A {css-правила}
На самом деле способов применения селекторов атрибутов можно придумать еще много. Они могут в какой-то мере упростить работу там, где это нужно. Используйте css и подписывайтесь на блог, чтобы узнавать больше о веб-разработке.
О новых css3 селекторах, о которых не писал в прошлых статьях.
Это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input
, которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.
Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript .
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @ .
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:
Input:invalid{ color: red; }
Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.
Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
:required – выберет элементы, у которых есть данный атрибут. То есть все поля, обязательные к заполнению.
:optional – противоположный класс, выберет поля, которые являются необязательными.
:not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ
стили. Пару примеров.
a:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav , но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article , кроме первого абзаца с классом special.
Как видите, в круглых скобках для псевдокласса записывается условие: что именно нужно исключить из выбора. В условии также можно записывать комбинированные селекторы, так что вы можете выбрать и исключить все, что угодно.
Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Ах да, еще же вы можете продолжить составление селектора после:not (). Например:
div:not(#header) .wrap – выбирает все дивы c классом wrap , кроме дива с id="header"
Это были селекторы, которые появились в CSS3.
Чтобы определить, какие стили являются более приоритетными, пользуйтесь простыми правилами:
Идентификатор является самым приоритетным селектором. Если у элемента есть стилевой класс и id , и в обоих назначены одинаковые свойства с разными значениями, то будет выполнены те стили, которые записаны для идентификатор.
Класс является более приоритетным селектором, чем селектор тега (p, table, ul). Псевдокласс имеет такой же вес, что и простой класс. p:first-line приоритетнее, чем.firstline , потому что во втором селекторе просто класс, а в первом — селектор тега + псевдокласс.
Еще одно полезное правило — чем конкретнее селектор, тем более приоритетными являются стили для него. Например, между body и p битву выигрывает абзац, поскольку это более конкретный селектор, чем body (потому что это вся страница, то есть не очень конкретно). А table p , в свою очередь, конкретнее, чем просто p . В общем, просто знайте о таких правилах.
В этой статье были рассмотрены почти все селекторы CSS. Хочу еще добавить, что если вы используете jQuery, то там свои селекторы, хотя очень похожие на эти, но небольшие различия есть.
". Итак, селектор - это элемент, к которому применяется объявление в правиле стиля.
Термины, используемые в описании правил CSS.
Рис.1. Обычное правило CSS. Рис.2. Пример правила CSS.
Коротко про синтаксис записи правил CSS:
В качесте селекторов может выступать любой тег HTML, также есть селекторы класса либо id-селекторы. Рассмотрим всё по порядку.
Как писалось ранее, любой тег может быть селектором в правиле CSS. Рассмотрим пример.
Кстати, можно группе селекторов задать одно объявление. Например, мы хотим чтобы теги заголовков
Такая запись стиля равносильна следующей группе правил:
Можно назначать стилевые правила элементам в зависимости от того, вложен ли этот элемент в другой. Если один тег вложен в другой, то вложенный тег называется его потомком, а тег в который вложен потомок называется предком. Например, нужно задать абзацам
Внутри таблицы
Привет!Текст абзаца в таблице. |
Текст абзаца вне таблицы.
Все теги
Во всех таблицах документа будут отображать цвет красным цветом. Обратите внимание, то тег
Находящийся внутри тега
На самом деле, вместо
, так как тег
|