mojoPortal на русском

 

CSS - Всё для понимания селекторов (Selectors)

Введение - Только 2 вещи для понимания

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

Существуют только 2 концепции - CSS сводится к Селекторам и Правилам. Селекторы служат для выбора разметки, стиль которой мы хотим поменять, а правила для применения определённых стилей к выбранным элементам. Если Вы видите запись или оператор в css файле, то часть в фигурных скобках { } это правило, а часть перед ними - селектор. Ниже показан простейший пример селектора элемента:

p { border:solid thin black; }

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

Большинству людей, как правило, легко понять часть с правилами. А дальше, с помощью интернета и справочников, можно подобрать необходимые для достижения цели параметры. Но истинная сила CSS в понимании селекторов, и многие напрасно бьются в запертые ворота, вместо того, чтобы облегчить себе жизнь, более подробно изучив селекторы. Селекторы позволяют выбрать элементы для стилизации и недопонимание порядка выбора останавливает людей от их применения. В mojoPortal, если освоить CSS селекторы, можно выбрать практически любой необходимый Вам html элемент. Итак, основная цель данной статьи - научить Вас выбирать что угодно в разметке. Мы не собираемся показывать Вам какие-либо великолепные правила для стилей (нет пределов для совершенства и всегда можно придумать лучше). Мы не лучшие дизайнеры, но хорошо разбираемся в дизайне шаблонов mojoPortal, единственной причиной чего служит понимание CSS селекторов. Это позволяет выбрать необходимый элемент и просто применить правила, придуманные дизайнером. Далее в этой статье будет рассказано о некоторых селекторах и показаны примеры их работы .Начнём от простых (возможно уже известных Вам), а затем перейдём к более сложным, знание которых позволит перейти Вам на следующий уровень.

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

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

p { border:solid thin black; }

Это легко для понимания, но давайте рассмотрим больше примеров для показа нюансов. Допустим, необходимо выбрать все TextBoxes и добавить рамку к ним:

input[type=text] { border:solid thin black; }

Селектор "input[type=text]" означает все входящие элементы с атрибутом text.

или выпадающий список:

input[type=select] { border:solid thin black; }

Мы также можем выбрать элементы по их местоположению. Например:

div div input[type=text] { border:solid thin black; }

означает все входящие с  type = text, которые расположены, не менее чем во втором уровне вложения элемента div

body {} - Выбор элемента body.

div {} - Выбор всех элементов div.

h1 {} - Выбор всех элементов h1.

div h2 {} -Выбор всех элементов h2, размещённых в div.

Селекторы Класс (Class) и Идентификатор (ID)

Селекторы класс и ID основные и наиболее используемые. Кроме того, начиная изучение CSS, обычно, сперва учатся использовать имена классов на их разметке, а затем переходят к использованию селектора Класс. Скорее всего, именно поэтому существует следующий div:

<div class="productwrapper">
some additional markup about a product goes here
</div>

Теперь можно установить рамку на этот div и на любой другой, имеющий тот же класс, с помощью селектора и правила (обратите внимание на то, что имя класса чувствительно к регистру):

.productwrapper { border:solid thin black; }

Селекторы ID похожи, только применяются к конкретному элементу, т.к. идентификатор должен быть уникальным.

<div id="divMyProduct">
some additional markup about a product goes here
</div>

Для добавления рамки, необходимы селектор и правило, например:

#divMyProduct { border:solid thin black; }

В системе управления контентом mojoPortal, как и в других cms, работающих на ASP.NET, обычно, ID селекторы используются не часто. Это связано с тем, что ID селекторы, как правило, генерируются автоматически системой длинными и уродливыми (для обеспечения уникальности) и с ними работать не так удобно как с селекторами класса. Вы можете использовать их для элементов html в файле layout.master и, нигде больше (будет лучше). В действительности острой необходимости в них нет, т.к. для тех же целей прекрасно подходят селекторы класса, с которыми ещё и проще работать. Поэтому дальше речь о них не пойдёт, а сконцентрируется на использовании селекторов класса.

Вы можете применить более одного класса к элементу

Это то, что многие не понимают, поэтому рассмотрим следующую разметку:

<div class="panelwrapper survey">
some additional markup produced by the Survey features goes here
</div>

div имеет 2 класса, имена которых разделены пробелом. И это корректно. Правила обоих классов будут применены. Так что, если css файл выглядит следующим образом:

.panelwrapper { border: solid thin black; }
.survey { color: red; }

Это выделит div в рамку, а текст внутри сделает красным.

Данная функция CSS используется в mojoPortal для упрощения применения одного стиля к элементам разных модулей, а также для возможности настроить стиль конкретного модуля. Выше приведён реальный пример из mojoPortal. Если Вы добавите опрос на страницу, то получите div, содержащий эти самые классы "panelwrapper survey". А если добавите простой блок HTML, то получите div с class="panelwrapper htmlmodule". Это значит, что при необходимости применить одинаковые правила к разным функциям - используем селектор .panelwrapper. Если же нам необходимо настроить только Опрос, тогда работаем с селектором .survey, а для настройки только HTML Блока - селектор .htmlmodule.

Теперь рассмотрим пример. Допустим, используется Модуль Опрос и, допустим, необходимо расширить блок вопросов textbox. Вы можете просмотреть обработанную разметку страницы и найти имя класса для общего текстового блока, который можно использовать, но нет имени класса для конкретного текстового блока. Если Вы знаете только основные селекторы класса, то можно зайти в тупик. Будет гораздо проще, если Вы будете в курсе, что можно использовать имя класса родительского элемента для помощи в стилизации textbox. Просматривая обработанную разметку дальше, можно увидеть что текстовое поле для вопроса опроса заключено в div с class="settingrow". Следовательно его можно настроить так:

.settingrow input[type=text] { width:300px;}

Это сделает все текстовые блоки, которые принадлежат элементам с классом settingrow, шириной 300 пикселей. Но, возможно, это слишком радикально - применять данное правило ко всем модулям, у которых текстовые блоки заключены в div, имеющий класс settingrow. Поэтому необходимо сделать правило более конкретным. Смотрим далее на обработанную разметку и обращаем внимание на то, что существует div, включающий в себя Опрос, с class="panelwrapper survey", так что можно создать более конкретный селектор. Например:

 .survey .settingrow input[type=text] { width:300px;}

Теперь наш селектор относится только к модулю Опрос. Селектор говорит - выбрать все текстовые поля, которые содержатся в элементах с классом settingrow, который, в свою очередь, входит в класс survey.

Обратите внимание на то, что селекторам всё равно, какому виду элементов присваиваться. .cool определит все элементы класса cool. Можно использовать этот класс для некоторых div, параграфов или ссылок. Если необходимо выбрать элементы div с классом cool, то селектор будет выглядеть так:

div.cool { }

Если необходимо выбрать параграфы с классом cool, то можно использовать:

p.cool {}

Если необходимо выбрать все параграфы, включённые в блоки div с классом cool, то следует использовать следующий код:

div.cool p {}

Если же необходимо выделить ссылки, находящиеся внутри параграфа с классом cool, который, в свою очередь, находится в div с классом cool, используется:

div.cool p.cool a {}

Или, возможно, необходимы только ссылки, содержащиеся в элементах span:

div.cool p.cool span a {}

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

Селекторы Потомков

Мы уже видели селекторы потомков, но, лучше определиться с формулировкой, для облегчения взаимопонимания. Они также известны как Контекстные селекторы. Селекторы потомков -  объединённые в группу селекторы, позволяющие выбирать элемент на основе структуры разметки.

li ul {} - Выбирает любые ul, содержащиеся в li.

ul ul {} - Выбирает только элементы ul, которые входят в другой ul.

ul li ul li a {} - Выбирает ссылки элементов li.

Обратите внимание, что дочерних селекторов не волнует глубина залегания.

div a {} изменит все элементы a, расположенные в div, вне зависимости от того, вложены ли они ещё в какой-либо элемент внутри div.

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

Селекторы атрибутов также уже рассматривались. Однако стоит объяснить ещё несколько примеров. Селекторы атрибутов позволяют выбирать элементы на основе их атрибутов. Мы уже знакомы с селекторами классов, но можно выбрать элемент по классу используя селектор атрибутов.

p[class=cool] {}

эквивалент:

p.cool {}

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

Их можно использовать для выбора элементов, имеющих только атрибуты. Например, если необходимо использовать зелёный шрифт для любых ссылок, имеющих название (title), можно использовать:

a[title] { color:green; }

Или у нас есть ссылки на определённый сайт, которые необходимо выделить более крупным шрифтом:

a[href="http://www.mojoportal.net.ua"] { font-size: larger; }

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

Некоторые из них отображаются в разных браузерах по-разному.

Дочерние селекторы более конкретны, нежели селекторы потомка. В случае с "div a {}" будут выбраны все элементы a, даже если они дополнительно буду вложены в другие элементы. Например а, включённая в p, который находится внутри div, будет выбран. Если необходимо выбрать элементы a, которые находятся внутри div и больше никуда не включены, то используется следующий селектор:

div > a {}

Выбор смежных родственных элементов

Некоторые из них отображаются в разных браузерах по-разному.

h2 + p { margin-top: 2px; }

Выбирает только те элементы p, которые идут после элемента h2.

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

Некоторые из них отображаются в разных браузерах по-разному.

:focus {} - Выбирает любые элементы, имеющие focus.

:hover {} - Выбирает любые элементы, на которые наводится курсор.

Как пример, популярные селекторы псевдоклассов для ссылок:

a:link { color: #6297BC; }
a:visited { color: #6297BC; }
a:hover { color: #72A545; }
a:active { color: #6297BC; }

Применение одного правила к разным селекторам

Можно применять одно и то же правило к различным селекторам, разделяя их запятыми:

h1, h2, h3 {color: green;}

Данное правило применяется ко всем трём элементам (h1, h2 и h3). Также возможно перечисление более сложных селекторов:

div.cool ul a, .verycool p a {}

Надеемся что эти примеры позволят Вам начать проведение собственных экспериментов и открывать новые возможности для выбора необходимых элементов. Что, в свою очередь, позволит создавать новые стили  и научит уже нас чему-нибудь новому!

Оригинал на английском.

http://mojoportal.net.ua/css-всё-для-понимания-селекторов-selectors.aspx