Блог Web-мастера

jQuery, php, CSS и немножко SEO


Селекторы CSS

селекторы css

селекторы css

CSS - один из сымых мощных инструментов, для веб-дизайнеров и разработчиков web-сайтов и приложений (если не самый мощный). С его помощью мы можем полностью преобразовывать внешний вид сайта всего за пару минут. Но, несмотря на тот факт, что все мы хорошо осведомлены о его полезности, CSS селекторы до сих пор не используются в той степени, которую заслуживают, и мы иногда перегружаем наш HTML чрезмерным количеством ненужных классов и идентификаторов, div’ами и span’ами.

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

Специфика CSS

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

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

Так как же вы вычислить специфичность того или иного селектора? Это довольно просто, если учесть, что специфика будет представлена в виде четырех чисел, разделенных запятыми, например:

1, 1, 1, 1 или 0, 2, 0, 1

  1. Первая цифра - всегда нулевой, если не является атрибутом стиля, применяемом к самому элементу.
  2. Вторая цифра - это сумма количества идентификаторов в селекторе.
  3. Третья цифра - сумма других атрибутов селекторов и псевдо-классов в селекторе. Классы (.example ) и селекторы атрибутов (например LI [ID = red]) .
  4. Четвертая цифра - подсчитывает элементы (например, table, P, Div и т.д.), и псевдо-элементы (например : first-line).
  5. Универсальный селектор (*) имеет специфику нуля
  6. Если два селектора имеют одинаковую специфичность, тот, который идет последним в CSS, тот и будет принят.

Давайте взглянем на несколько примеров, чтобы было более понятно:

  • #sidebar h2 — 0, 1, 0, 1
  • h2.title — 0, 0, 1, 1
  • h2 + p — 0, 0, 0, 2
  • #sidebar p:first-line — 0, 1, 0, 2

Следующие селкторы, первый из них тот, который будет применяться к элементам, потому что у него “большая” спицифика:

  • #sidebar p#first { color: red; } — 0, 2, 0, 1
  • #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

Очень важно иметь хотя бы общее представление о работе специфики, но инструменты, такие как Firebug полезны, чтобы дать нам знать, какой селектор применяется к конкретному элементу, перечислив все CSS селекторы по порядку их специфики при проверке элемента .

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

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

Есть 6 различных типов атрибутов:

  • [att=value] - Атрибут должен иметь точные значения.
  • [att~=value] - Атрибуты селектора должны быть разделены пробелами - список слов (например, class=”title featured home”), и одно из слов точно заданного значения.
  • [att|=value] -Атрибут значение именно “value” или начинается со слова “value”, и это сразу после “-”, поэтому он будет “value-”.
  • [att^=value] -Значение атрибута начинается с заданного значения (”value”).
  • [att$=value] - Значение атрибута заканчивается на “value”.
  • [att*=value] -  Значение атрибута содержит указанное значение (”value”).

Например, если вы хотите изменить цвет всех элементов div, в названии атрибута class которых содержится слово “post”, вы можете использовать атрибут селектора.


div[class$="post"] {
background-color: #333;
}

Это свойство будет действовать на все элементы div, атрибут class которых содержит “post”, в любом состоянии.

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


input[type="text"] {
width: 200px;
}

Это свойство будет действовать на все элементы input, атрибут type которых “text”.

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


a[href*=".jpg"] {
background: url(jpeg.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}

a[href*=".pdf"] {
background: url(pdf.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}

a[href*=".doc"] {
background: url(word.gif) no-repeat left 50%;
padding: 2px 0 2px 20px;
}

В этом примере мы использовали атрибуты селектора, которые будут нацелены на все ссылки а, чьи атрибуты href заканчиваются на  (*)  .jpg, .pdf или .doc.

Пару слов о кроссбраузерности.
Помимо Internet Explorer 6, все основные браузеры поддерживают выбор атрибутов.

2. Наследники селекторов

Наследники селекторов представляют собой знак “>”. Он позволяет выделить элементы, являющиеся прямыми потомками определенного элемента.

Например, если вы хотите выделить все элементы h2, которые являются прямым потомками div‘a боковой панели , но  не элементы h2, которые могут быть также в div‘e, но которые являются внуками (или более поздними потомками) вашего элемента, вы можете использовать следующий код:


div#sidebar > h2 {
font-size: 20px;
}

Вы также можете комбинировать с двумя и более уровнями вложенности. Например, если вы хотите назначать свойства только для элементов blockquote, которые находятся в div‘ах, которые являются прямыми внуками элемента body :


body > div > div  blockquote{
margin-left: 30px;
}

Пару слов о кроссбраузерности.
Помимо IE 6, все основные браузеры поддерживают дочерние селекторы (наследников селекторов).

3. Родственные комбинаторы

Существуют два вида родственных комбинаторов: соседние родственные комбинаторы и общие родственные комбинаторы.

Соседние родственные комбинаторы

Этот селектор использует знак “плюс”, “+”, чтобы объединить две последовательности простых селекторов. Элементы в селекторе имеют одних и тех же родителей, второй элемент должен идти сразу же после первого.

Использование соседних родственных комбинаторов может быть очень полезно, например, при работе с текстом.

Допустим, Вы хотите добавить margin-top во все тэги h2, которые идут после параграфа (тэг p) (Вам не нужно добавлять margin-top, если в статье h2 идет после тега h1 или если это первый элемент на этой странице):


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

Вы можете быть еще более конкретным, и сказать, что вы хотите, чтобы это условие применялось, если элементы находятся в div‘е с классом “post“:


div.post p + h2 {
margin-top: 10px;
}

Или же вы можете добавить еще один уровень сложности: в первой строке параграфа (тэг p), который следует за заголовком (h1), который в свою очередь находится в блоке с классом “post” (class=”post”) , все строчные символы преобразовывались в заглавные уменьшенного размера.


.post h1 + p:first-line {
font-variant: small-caps;
}

Обобщенные родственные комбинаторы

В целом, обобщенные родственные комбинаторы, работают так же, как соседние редственные комбинаторы, но с той разницей, что второй селектор может быть не один.

Итак, если вы хотите выделить все p теги, которые следуют за тэгом h1 (их может быть несколько ( <h1>Заголовок</h1><p>Текст</p><p>Текст1</p><p>Текст2</p> )), вы можете использовать этот селектор :


.post h1 ~ p {
font-size: 13px;
}

Пару слов о кроссбраузерности.
Кроме осла (IE 6), все основные браузеры поддерживают родственные комбинаторы.

4. Псевдо-классы

Динамические псевдо-классы

Динамические псевдо-классы так называются потому, что они фактически не существуют в HTML: они появляются только тогда, когда пользователь находится на сайте или взаимодействуют с ним.

Есть два типа динамических псевдо-классов: ссылки и пользовательские взаимодействия с ними.

Ссылки :link и :visited, пользовательские действия :hover, :active и :focus.
Из всех CSS селекторов, упомянутые выше - наиболее часто используемые.

:link псевдо-класс относится к ссылкам, которые не были посещены пользователем, в то время как :visited псевдо-класс относится к ссылкам, которые посетили, поэтому они являются взаимоисключающими.
:hover псевдо-класс применяется, когда пользователь наводит курсор мыши на элемент, без необходимости активации или клика по нему.

:active псевдо-класса применяется, когда пользователь кликает на этот элемент.

И наконец :focus псевдо-класс применяется, когда элемент находится в фокусе (например курсор в текстовом поле).

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


input:focus {
background: #D2D2D2;
border: 1px solid #5E5E5E;
}

input:focus:hover {
background: #C7C7C7;
}

Пару слов о кроссбраузерности.
Есть две новости (одна хорошая, вторая плохая). Начну с хорошей. Динамичние псевдо-классы, поддерживаются всеми современные браузерами, даже IE6. Но! :hover, :active можно применять не только для ссылок, а для любых элементов только с 8 версии этого убожества (Internet Explorer 8).

:first-child

Псевдо-класс :first-child позволяет выделить целевой элемент, который является первым ребенком другого элемента. Например, если вы хотите добавить  margin-top к первому li элементу ваших списков, вы можете сделать следующее:


ul > li:first-child {
margin-top: 10px;
}

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


#sidebar > h2 {
margin-top: 10px;
}

#sidebar > h2:first-child {
margin-top: 0;
}

Пару слов о кроссбраузерности.
Кроме осла (IE 6), все основные браузеры поддерживают селектор :first-child .

Языковой псевдо-класс

Языковой псевдо-класс  :lang(), позволяет выделить элемент, основываясь на его языке.

Так, например, если Ваш сайт поддерживает несколько языков, можно выделить ссылки на выбор языка следующим образом:


:lang(en) > a#flag {
background-image: url(english.gif);
}

:lang(ru) > a#flag {
background-image: url(russian.gif);
}

Пару слов о кроссбраузерности.

Неудивительно, что Internet Explorer,  поддерживает этот селектор только с 8 версии. Все другие основные браузеры поддерживают псевдо-селектор :lang().

5. CSS 3 псевдо-классы

:Target

Например, Предположим, у вас есть большие (длинные) страницы с большим количеством текста и h2 в заголовках, и есть индекс этих заголовков в верхней части страницы. Будет намного проще для пользователя, если при нажатии на определенную ссылку в индексе, заголовок будет подсвечен, а страница - прокручена к нему. Легко:


h2:target {
background: #F2EBD6;
}

Пару слов о кроссбраузерности

На этот раз, Internet Explorer действительно раздражает и не имеет поддержки для всех :target псевдо-классов. Другая загвоздка в том, что Opera не поддерживает этот селектор при использовании кнопок НАЗАД и ВПЕРЕД. Не считая всех этих нюансов, он поддерживается в других основных браузерах.

Псевдо-классы, управляющие элементами интерфейса.

Некоторые HTML элементы могут быть активными и не активными (например, поля input) или включенными и выключенными (radio кнопки и checkbox). Эти элементы могут иметь :enabled, :disabled или :checked псевдо-классы.

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


input:disabled {
border:1px dotted #999;
background:#F2F2F2;
}

Можно также указать, чтобы все выделенные чекбоксы имели margin-left: 15px, чтобы они выделялись в длинном списке.


input[type=”checkbox”]:checked {
margin-left: 15px;
}

Пару слов о кроссбраузерности.

Все основные браузеры, кроме нашего инвалида, Internet Explorer, поддерживают псевдо-классы, управляющие элементами интерфейса.

6. CSS 3 - структурные псевдо-классы

:nth-child

Псевдо-класс :nth-child() позволяет обращаться конкретно к одному или нескольким конкретным детям родительского элемента.

Вы можете обращаться к потомкам по их порядковым номерам


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

Это позволит раскрасить текст в третьем пункте li в списке красным цветом. Имейте в виду, что если различные элементы внутри ul (не li), они также будет учитываться как потомки.

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


ul li:nth-child(3n+4) {
color: yellow;
}

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


ul li:nth-child(3n) {
color: yellow;
}

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


ul li:nth-child(-n+4) {
color: green;
}

Значение :nth-child также может быть определено как “четные” и “нечетные” (“even” или “odd”),  используйте “2n” (каждый второй ребенок) или “2n +1” (каждый второй ребенок, начиная с первого), соответственно.

:nth-last-child

:nth-last-child псевдо-класс работает в основном как  псевдо-класс :nth-child,  но он начинает отсчет элементов с последнего.


ul li:nth-child(-n+4) {
color: green;
}

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

Вы также можете использовать значения “четные” и “нечетные” (“even” или “odd”), с той разницей, что в этом случае они будут считать детей, начиная с последнего:


ul li:nth-last-child(odd) {
color: grey;
}

:nth-of-type

:nth-of-type псевдо-класс работает точно так же как псевдо-класс :nth-child, с той лишь разницей, что оно действует лишь на потомков, которые соответствуют элементу в селекторе.

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


p:nth-of-type(even) {
color: blue;
}

Вы можете использовать те же значения, которые используете для псевдо-класса :nth-child.

:nth-last-of-type

Вы угадали! Псевдо-класс :nth-last-of-type может быть использован так же, как вышеупомянутый :nth-last-child , но на этот раз, он будет нацелен только на те элементы, которые соответствуют нашим селекторам:


ul li:nth-last-of-type(-n+4) {
color: green;
}

Мы можем быть еще более умными, и объединить более чем один из этих псевдо-классов вместе на массовые селекторы. Скажем, все изображения в в посте размещаются слева, за исключением первого и последнего (эти изображения будут иметь полную ширину, поэтому они не должны “плавать”):


.post img:nth-of-type(n+2):nth-last-of-type(n+2) {
float: left;
}

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

:last-child

Псевдо-класс :last-child работает точно так же, как псевдо-класс :first-child, но его цель - последний ребенок родительского элемента.

Давайте последнему элементу p в div’e с классом .post отменим нижний отступ.


.post > p:last-child

{

margin-bottom: 0;

}

Это селектор будет нацелен на последний пункт, который является прямым и последним ребенком элемента с классом “post”.

:first-of-type и :last-of-type

Псевдо-класс :first-of-type используется для целевого элемента, который является первым в своем роде в рамках своих родителей.

Например, можно ориентировать на первый элемент p, который является прямым ребенком от конкретного div и сделать “капитель” его первой строки:


.post > p:first-of-type:first-line {

font-variant: small-caps;

}

Вы ориентируетесь только на те элементы, которые являются прямыми потомками div.post и свойство будет действовать только на первый p элемент.

Псевдо-класс :last-of-type работает точно так же, но цель - последний наследник элемента в своем типе.

:only-child

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

Скажем, у вас есть несколько блоков с классом ( “.news“), с абзацами текста внутри них. Когда у вас более одного параграфа ( p ), хотите, чтобы текст, был меньше, чем когда у вас есть только один параграф:


div.news > p {
font-size: 1.2em;
}

div.news > p:only-child {
font-size: 1.5em;
}

В первом селекторе, мы определяем общий размер текста p элементам, которые являются прямыми потомками div.news. Во втором  мы говорим: если p элемент - единственный ребенок в разделе div.news, его размер шрифта должен быть больше.

:only-of-type

Псевдо-класс :only-of-type представляет собой элемент, который является единственным ребенком своих родителей, того же типа.

Как это можно использовать? У вас есть последовательность сообщений, каждое из которых представлено div с классом .post. Некоторые из них имеют более чем одно изображение, а другие имеют только одно изображение. Вы хотите, чтобы изображение в более поздние быть приведены в соответствие к центру, а образы, на должности с более чем одно изображение, которое будет поплыл. Это было бы довольно легко решить при помощи этого переключателя:


.post > img {
float: left;
}

.post > img:only-of-type {
float: none;
margin: auto;
}

:empty

Псевдо-класс :empty представляет собой элемент, который не содержит контент, т.е. попросту пустой.

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


#sidebar .box:empty {

display: none;

}

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

Пару слов о кроссбраузерности.
Internet Explorer (до 8 версии) не поддерживает структурные псевдо-классы. Firefox, Safari и Opera поддерживают эти псевдо-классы начиная с их последних релизов.

7. Исключающий псевдо-класс.

Псевдо-класс :not(), позволяет исключить элементы, которые совпадают с аргументом селектора.

Например, это может быть полезно, если вам нужно назначить стили всем элементам input в форме, но вы не хотите, чтобы эти правила действовали на кнопки:


input:not([type="submit"]) {
width: 200px;
padding: 3px;
border: 1px solid #000000;
}

Другой пример: вы хотите, чтобы все элементы p в div.post имели больший размера шрифта, за исключением тех, которые содержат время и дату:


.post p:not(.date) {
font-size: 13px;
}

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

8. Псевдо-элементы

Псевдо-элементы предоставляют Вам доступ к элементам, которые фактически не существуют в HTML, как  первая строка текстового блока или его первый символ.Псевдо-элементы имеются в CSS 2.1, но в спецификации CSS 3 заявлено, что они должны быть использованы с двойным “::”  двоеточием, чтобы отличить их от псевдо-классов. В CSS 2.1, они используются только с одним двоеточием, “:”. Браузер должен принимать в обоих форматах, кроме случаев с  псевдо-элементами, которые могут быть введены только в CSS 3.

::first-line


Псевдо-элемент ::first-line - будет соответствовать первой строке блока, встроенный блок, заголовок таблицы или таблицы элементов на клеточном уровне.Это особенно полезно при добавлении тонких типографских подробностей в ваши блоки текста, как, например, преобразование первой строки статьи в маленькие заглавные буквы:


h1 + p::first-line {
font-variant: small-caps;
}

Если вы внимательны, вы знаете, что это означает, что праграф (p), который следует сразу же после (”+”) тега  h1 должен преобразовать буквы в первой строке в маленькие заглавные.Можно также сослаться на первую строку частного div, не обращаясь к фактическому тегу абзаца:


div.post p::first-line { font-variant: small-caps; }

Или еще один шаг дальше и сделать целью конкретно первый параграф p в div.post:


div.post > p:first-child::first-line {
font-variant: small-caps;
}

Здесь символ “>” означает, что вы ориентируетесь на прямого потомка div.post, так что если параграф второй в div.post, он не будет совпадать с этим селектором.

::first-letter


Псевдо-элемент ::first-letter будет соответствовать первой букве блока.Как и ::first-line псевдо-элемент ::first-letter обычно используется, чтобы добавить типографские детали к тексту элементов, например, буквиц и инициалов.Вот как вы можете использовать псевдо-элемент ::first-letter для создания буквицы:


p {
font-size: 12px;
}p::first-letter {
font-size: 24px;
float: left;
}

Имейте в виду, что при использовании обоих ::first-line и ::first-letter в одном элементе ::first-letter будет иметь приоритет над теми же свойствами, унаследованные от ::first-line.

::before и ::after

Псевдо-элементы ::before и ::after используются для того, чтобы вставить содержимое до или после содержания элемента, чисто с помощью CSS.Эти элементы не наследуют многие свойства элементов, к которым они привязаны.Представьте, вы хотите, чтобы слова “Графический число х:”  выводились перед описанием графиков и диаграмм на вашей странице. Вы могли бы добиться этого без того, чтобы писать слова “Графический числа”, или номер самого себя:


.post {
counter-reset: image;
}p.description::before {
content: "Figure number " counter(image) ": ";
counter-increment: image;
}

Пару слов о кроссбраузерности.
Такие псевдо-элементы поддерживаются IE8 (не IE7 или 6), если единый формат использует двоеточие (например, ::first-letter, а не ::first-letter). Все другие основные браузеры поддерживают эти селекторы.

Заключение

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

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

Вольный перевод статьи Taming Advanced CSS Selectors

Google Bookmarks Digg I.ua Linkstore Myscoop Communizm Ru-marks Webmarks Ruspace Linkomatic Kli.kz Web-zakladka Zakladok.net Reddit delicious Ma.gnolia Technorati Slashdot Yahoo My Web News2.ru БобрДобр.ru Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Похожие статьи

Если Вам понравилась эта статья,
подпишитесь на RSS !

Метки: , , , ,

22 Комментариев к “Селекторы CSS”

  1. SeoТурист написал:

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

  2. Айгуль написал:

    Гениально! Век живи - век учись!
    Уже пошла пробовать :)
    Столько полезных и быстрых решений можно реализовать, жаль IE у нас стоит всегда на первом месте, когда смотрят на кроссбраузерность.

    И статья написана классно и с долей юмора. Спасибо!

  3. Kama написал:

    Замечательная статья! Если к этому всему привыкнуть, то точно “никогда не оглянетесь назад”, а ИЕ6 и тех, кто им, до сих пор, пользуется фтопку :)

  4. Animatoru написал:

    Kama на счет ie6 ты не прав.
    На самом деле очень безопасный и мощьный браузер. В том смысле что ни один другой браузер не работает с текстовыми редакторами так как IE. Кто не согласен-того втопку. Любой веб програмист как раз и подганяет все под эксплорер. Потому как после подгонки проекта под IE6 можно не беспокоиться что в каком то браузере что то нетак будет работать. даже винда работает на стандарте эксплорера.
    Сам когдато думал кому нах. нада ИЕ, но после разработов под оперу, заметил что даже firefox не отображает так как в опере. После чего сделал проект тупо под ИЕ6 и все стало на свои места!!!
    Не важно кто им пользуеться или нет, это стандарт и он не скоро умрет.

  5. Yura goldblog написал:

    Animatoru, почему тогда jQuery, Google и многие другие отказываются от поддержки ie6? Да просто потому, что это геморрой! Куча лишнего кода, абсолютно невозможно создать современное высокофункциональное максимально оптимизированное приложение (с учетом стандартов CSS>2.1) с поддержкой IE6. IE6 - динозавр, место которому в музее.

  6. Vladimir написал:

    Спасибо за информацию!

  7. Mak написал:

    “Кроме осла (IE 6), ”

    Вообще мне нравится IE 6, сейчас пользуюсь IE 8, но с этим я согласен
    :D

  8. senseysensor написал:

    хорошая, весьма объёмная статья.
    спасибо

  9. Sufir написал:

    “Соседние родственные комбинаторы: второй элемент должен идти сразу же после первого”.

    А можно как-то обратиться к предыдущему элементу? Т.е. например изменить стиль заголовка, если после него идёт параграф с определённым классом?

  10. Герман написал:

    Как в CSS выбрать предка? То есть у меня есть правило -
    a {border:solid 1px black} а мне надо границу с картинок убрать, есть ли какойто вариант типа
    a:that-have-child(img) {border:0}

  11. Yura goldblog написал:

    всё намного проще:
    a img{border:none;}

  12. Михаил написал:

    Yura goldblog: Это все-же разные вещи вот дрозофилка

    a {border:solid 1px black}
    a b {border:none;}

    Test
    Test

  13. Андрей-йог написал:

    Ох, не любите вы Internet Explorer…

  14. KLiDE написал:

    Очень удобная шпаргалка, часто ей пользуюсь, спасибо!

  15. Cryptic написал:

    » [att$=value] -Значение атрибута содержит указанное значение (”value”).
    » [att*=value] - Значение атрибута заканчивается на “value”.
    Неправильно, нужно поменять местами описание:
    $ - конечное значение, а * - содержит значение.

  16. Хосе Родригес написал:

    благодарю за столь полезную шпаргалку)

  17. Марк написал:

    Спасибо, замечательная статья!
    как уже было сказано - жаль ИЕ не тянет многое(
    ну а то, что на нем можно проверять верстку - здорово конечно, но не стоит тех проблем которые он порождает))

    что особенно плохо, на мой взгляд, так это не поддержка nth-child

  18. STU написал:

    [att$=value] -Значение атрибута содержит указанное значение (”value”).
    [att*=value] - Значение атрибута заканчивается на “value”.

    Бред. Всё в точности до наоборот. И пример какой то неудачный для $. Им лучше всего выделять расширения файлов.

  19. Слава написал:

    Добрый день!
    Вопрос уже прозвучал, но остался без ответа.
    Можно ли средствами CSS задать стилевое свойство родителя ?
    Для примераа: нужно задать свойство только тех элементов списка (li) в которых есть ссылка (a).

  20. Yura goldblog написал:

    Слава, нельзя. Прочитайте здесь http://web-standards.ru/articles/parent-selector/ с абзаца “Почему у нас нет селектора по родителю?”. Но эта проблема решается легко с помощью jQuery, примерно так jQuery(”a”).parent(”li”).css(…тут стили….);.

  21. sssss написал:

    спасибо! не получалось присвоить color первому элементу списка, попробовала сделать как написано здесь выше i:first-child > a - всё заработало!!!!!

  22. Barabashka написал:

    а можна використовувати відразу два псевдо селектори, нариклад, так:
    div.pull-left:nth-child(1)::before
    ??
    звичайно, пробував, не спрацювало.. але і відповідь в пошуку теж не вдалось знайти…

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

Я не робот.