Css условия – Можно ли задать условие в CSS?

Содержание

30 CSS-селекторов, о которых полезно помнить

Главная
->
Материалы
->
30 CSS-селекторов, о которых полезно помнить

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

30 CSS-селекторов, о которых полезно помнить

Итак, Вы разобрались с основными селекторами: id, class, селекторами потомков. И все? Если да, то Вы теряете очень много в плане гибкости управления внешним видом элементов на странице.

Несмотря на то, что многие из упомянутых здесь селекторов входят в спецификацию CSS3 и, соответственно, поддерживаются только современными браузерами, Вам все же следует ознакомиться с ними и держать их в памяти.

1. *


* {
 margin: 0;
 padding: 0;
}

Начнем с простейших вещей для новичков, прежде чем перейдем к продвинутым селекторам.

Символ звездочки позволяет выбрать все элементы на странице. Многие веб-разработчики используют это для «обнуления» всех внешних и внутренних отступов.

Также символ * можно использовать для дочерних элементов объекта.


#container * {
 border: 1px solid black;
}

Этот код нацелен на все элементы, которые являются дочерними по отношению к блоку с идентификатором container.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

2. #X


#container {
   width: 960px;
   margin: auto;
}

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

«Спросите себя: Мне точно необходимо использовать id для какого-то элемента, чтобы сослаться на него?»

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

3. .X


.error {
  color: red;
}

Это селектор класса. Разница между id и классами в том, что с помощью классов можно выбирать сразу несколько элементов. Используйте классы, если Вам нужно применить один стиль к группе элементов.

В противном случае используйте id для нахождения «иголки в стоге сена» и применения стиля только к одному конкретному объекту.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

4. X Y


li a {
  text-decoration: none;
}

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

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

«Совет: Если Ваш селектор похож на X Y Z A B.error, то Вы, вероятно, что-то делаете на так. Всегда спрашивайте себя, действительно ли это самый простой способ»

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

5. X


a {color: red;}
ul {margin-left: 0px;}

Что, если Вы хотите сослать на все элементы определенного типа на странице, если у них нет id или классов? Делайте проще, используйте селекторы типа. Если Вам нужно выбрать все неупорядоченные списки, используйте ul{}.

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

6. X:visited и X:link


a:link {color: red;}
a:visited {color: purple;}

Здесь мы используем псевдо-класс :link для выбора всех ссылок, на которых еще не был совершен клик.

Также есть псевдо-класс :visited, который, как Вы и ожидали, позволяет нам применить стиль только к тем ссылкам, по которым был совершен клик или переход.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

7. X + Y


ul + p {
   color: red;
}

Это так называемый смежный селектор. В этом случае каждый параграф следующий сразу после каждого элемента

ul будет красного цвета.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

8. X > Y


#container > ul {
  border: 1px solid black;
}

Различие между X Y и X > Y в том, что последний выберет только прямых потомков. Рассмотрим следующий пример:


<div>
      <ul>
         <li>Элемент списка
           <ul>
              <li>Потомок</li>
           </ul>
         </li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
         <li>Элемент списка</li>
      </ul>
</div>

Селектор #container > ul выберет только те элементы ul, которые являются прямыми потомками блока

div с идентификатором container. Т.е. в данном случае этот селектор не отберет элемент ul, который является потомком первого элемента li.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

9. X ~ Y


ul ~ p {
   color: red;
}

Эта комбинация сестринских (сиблинговых) элементов похожа на X + Y, но она менее строгая. Если в случае ul + p будут выбраны только первые элементы p, следующие за ul (т.е. наблюдается смежность в выборе), то рассматриваемый нами сейчас селектор более общий.

В нашем случае он отберет все элементы p, следующие за элементом ul.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

10. X[title]


a[title] {
   color: green;
}

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

11. X[href=»foo»]


a[href="http://www.codeharmony.ru"] {
  color: red;
}

Код выше позволит придать стиль всем ссылкам, атрибут href у которых равен http://www.codeharmony.ru. Эти ссылки будут красного цвета. Остальные ссылки не получат данного стиля.

Это работает хорошо, но это немного негибко. Что, если ссылка на самом деле ведет на Codeharmony.ru но, возможно, адрес указан, как codeharmony.ru а не http://www.codeharmony.ru? В таких случаях мы можем использовать основы регулярных выражений.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

12. X[href*=»codeharmony»]


a[href*="codeharmony"] {
  color: red;
}

Поехали дальше; это как раз то, что нам нужно. Звездочка означает, что искомое значение может находиться в любой части атрибута href. Таким образом, мы можем отобрать и http://www.codeharmony.ru и www.codeharmony.ru и codeharmony.ru.

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

13. X[href^=»http»]


a[href^="http"] {
   background: url(path/to/external/icon.png) no-repeat;
   padding-left: 10px;
}

Вы когда-нибудь думали о том, как на некоторых сайтах рядом с ссылками, ведущими на другие сайты (внешние по отношению к текущему) проставлены небольшие иконки, которые дают знать об этом пользователю? Это отличные «напоминалки» пользователю о том, что ссылка ведет на другой сайт.

Делается это с помощью символа ^ (карат). Он обычно используется в регулярных выражениях для обозначения начала строки. Если мы хотим отобрать ссылки, у которых атрибут href начинается с http, то мы можем использовать селектор из примера выше.

«Обратите внимание, что мы не ищем http://. Это необязательно и, к тому же, не учитывает ссылки по протоколу https://.»

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

14. X[href$=».jpg»]


a[href$=".jpg"] {
   color: red;
}

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

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

15. X[data-*=»foo»]


a[data-filetype="image"] {
   color: red;
}

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


a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
   color: red;
}

Но это муторно и не элегантно. Другой вариант — это создать собственный атрибут data-filetype и добавить его к каждой ссылке, ведущей на картинку.


<a href="path/to/image.jpg" data-filetype="image">Ссылка</a>

Поступив таким образом, мы можем использовать код данного примера:


a[data-filetype="image"] {
   color: red;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

16. X[foo~=»bar»]


a[data-info~="external"] {
   color: red;
}

a[data-info~="image"] {
   border: 1px solid black;
}

Вот еще один интересный трюк, о котором не все знают. Знак ~ (тильда) позволяет нам выбирать атрибуты со значениями, разделенными пробелами, т.е.


<a href="path/to/image.jpg" data-info="external image">Кликни сюда</a>

Используя данный прием мы можем делать выборки с нужными нам комбинациями:


/* Отобрать атрибут data-info, который содержит значение external */
a[data-info~="external"] {
   color: red;
}

/* и отобрать атрибут data-info, который содержит значение image */
a[data-info~="image"] {
  border: 1px solid black;
}

Совместимость:

* IE7+
* Firefox
* Chrome
* Safari
* Opera

17. X:checked


input[type=radio]:checked {
   border: 1px solid black;
}

Этот псевдо-класс отбирает те элементы, которые были отмечены, например, радиокнопку или чекбокс.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

18. X: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.

Совместимость:

* IE8+
* Firefox
* Chrome
* Safari
* Opera

19. X:hover


div:hover {
  background: #e3e3e3;
}

Это Вы точно знаете. Официальное название звучит вроде «псевдо-класс, основанный на действии пользователя». Звучит страшновато, хотя на деле все просто. Хотите применить к элементу определенный стиль, когда на него наводится курсор мыши? Это оно самое!

«Помните, что старые версии IE не понимают этого псевдо-класса по отношению к чему-бы то ни было, кроме тэга а.»

Часто данный прием используется для задания нижней границы для ссылок при наведении на них курсора:


a:hover {
 border-bottom: 1px solid black;
}

«Мега-чит: border-bottom: 1px solid black; выглядит лучше, чем text-decoration: underline;»

Совместимость:

* IE6+ (в IE6 работает только по отношению к ссылкам)
* Firefox
* Chrome
* Safari
* Opera

20. X:not(selector)


div:not(#container) {
   color: blue;
}

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

Если же мне нужно выбрать все элементы, кроме тэгов параграфов, то можно написать так:

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

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

21. X::pseudoElement


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Выбираем первую букву параграфа:


p::first-letter {
   float: left;
   font-size: 2em;
   font-weight: bold;
   font-family: cursive;
   padding-right: 2px;
}

Этот кусок кода найдет все параграфы на странице и применит к первой букве каждого из них указанные стили. Часто это используется для создания эффекта «газетного заголовка».

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


p::first-line {
   font-weight: bold;
   font-size: 1.2em;
}

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

Совместимость:

* IE6+
* Firefox
* Chrome
* Safari
* Opera

22. X:nth-child(n)

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

Помните времена, когда мы не имели возможности обратиться к конкретному порядковому элементу-потомку? Данный псевдо-класс решает эту проблему!

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

Мы можем даже выбирать группы элементов-потомков. К примеру, чтобы выбрать каждый четвертый элемент списка, нужно использовать конструкцию: li:nth-child(4n).

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari

23. X:nth-last-child(n)

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

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

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

24. X:nth-of-type(n)

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

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

Представьте, что на странице есть пять неупорядоченных списков. Если Вам нужно применить стили только к третьему списку, но у него нет уникального идентификатора и иных «зацепок», то можно воспользоваться псевдо-классом nth-of-type(n). В коде выше показан способ придания стиля только третьему неупорядоченному списку.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari

25. X:nth-last-of-type(n)

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

Да, для полноты картины есть и такой вариант. Так можно выбрать n-ный элемент определенного типа с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

26. X:first-child

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

Этот псевдо-класс позволяет выбрать только первого потомка родительского элемента. Часто используется для удаления границ первого и последнего элементов списка.

К примеру, если у вас есть список рядов, каждый из которых имеет border-top и border-bottom, то последний и первый элементы списка будут немного выбиваться из общего строя.

Для устранения этого недостатка можно использовать данный псевдо-класс.

Совместимость:

* IE7+
* Firefox
* Chrome * Safari
* Opera

27. X:last-child


ul > li:last-child {
   color: green;
}

В противоположность классу first-child, last-child выберет последний элемент родительского элемента.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

28. X:only-child

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

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

В нашем примере стиль будет применен только к параграфу, который является единственным потомком блока div.

Давайте рассмотрим для наглядности такую разметку:


<div><p>Здесь идет единственный в блоке параграф.</p></div>

<div>
   <p>Здесь идет первый параграф в блоке.</p>
   <p>Здесь идет второй параграф в блоке.</p>
</div>

В этом случае параграфы во втором блоке div выбраны не будут. Стиль будет применен только к параграфу из первого блока div.

Совместимость:

* IE9+
* Firefox
* Chrome
* Safari
* Opera

29. X:only-of-type

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

Этот псевдо-класс выбирает элементы, которые не имеют сестринских элементов в содержащем их контейнере. Например, давайте выберем все ul, которые содержат одинокие li.

Вы могли бы написать ul li, но этот способ выберет все элементы li. Единственный способ — использовать only-of-type.

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

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

30. X:first-of-type

Этот псевдо-класс позволяет отобрать первого сиблинга того же типа.

Чтобы лучше это понять, скопируйте в свой редактор следующий код:


<div>
   <p>Здесь параграф.</p>
   <ul>
      <li>Элемент 1.</li>
      <li>Элемент 2.</li>
   </ul>

   <ul>
      <li>Элемент 3.</li>
      <li>Элемент 4.</li>
   </ul>
</div>

Сейчас, не читая дальше, попробуйте придать стиль только «элементу 2». Когда догадаетесь (либо сдадитесь), читайте дальше.

Решение 1

Есть много способов решить данную задачу. Рассмотри лишь некоторые из них. Начнем с использования first-of-type:


ul:first-of-type > li:nth-child(2) {
   font-weight: bold;
}

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

Решение 2

Другой вариант — воспользоваться смежным селектором:


p + ul li:last-child {
   font-weight: bold;
}

Здесь мы находим ul, следующий непосредственно за тэгом параграфа, после чего находим самый последний его дочерний элемент.

Решение 3

Можно еще немного поиграть с селекторами и поступить таким образом:


ul:first-of-type li:nth-last-child(1) {
   font-weight: bold;
}

Сейчас мы уже получаем первый элемент ul на странице, затем ищем самый первый элемент li, но начиная с конца.

Совместимость:

* IE9+
* Firefox 3.5+
* Chrome
* Safari
* Opera

Вывод

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

Если Вы работаете с какими-либо JavaScript-библиотеками, например, с jQuery, то всегда старайтесь использовать «родные» CSS3 селекторы, когда это возможно. В этом случае Ваш код будет работать быстрее.

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

По материалам www.net.tutsplus.com
Перевод — Дмитрий Науменко.

P.S. Уже верстаете сайты или планируете глубже освоить CSS? Посмотрите еще серию бесплатных видео по резиновой верстке и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

www.codeharmony.ru

Условия CSS для разрешений экрана

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

До недавнего времени, разработчикам и верстальщикам сайтов приходилось бороться с кроссбраузерностью — отображением сайта одинаково при просмотре сайта в различных браузерах : Opera, Mozilla, Chromу и конечно же, так нелюбимый всеми верстальщиками — Internet Explorer.

С внедрением в жизнь мобильных технологий и популиризацией мобильных устройств, у верстальщиков и разработчиков сайтов появилась новая проблема — правильное отображение сайта на различных мобильных устройствах, с различным разрешением экрана. Но на спасение разработчиков в CSS3 появилась замечательная возможность media queries — при помощи различных условий, задавать правила css для определенной группы устройств, с различным разрешением. Ниже приведены все правила, при которых можно задать условия в СSS3 для определения ширины экрана, с которого просматривается сайт.

/* monitors and laptops */
@media screen and (min-width: 1240px) {}
/* tablet */
@media screen and (min-width: 1024px) and (max-width: 1240px) {}
@media screen and (min-width: 768px) and (max-width: 1024px) {}
/* mobile */
@media screen and (max-width: 768px) {}
/* iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {}
/* iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {}
/* iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}
/* Retina iPad in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2) {}
/* Retina iPad in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {}
/* iPad 1 & 2 in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){}
/* iPad 1 & 2 in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad 1 & 2 in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait & landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPad mini in portrait */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) {}
/* iPhone 5 in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {}
/* iPhone 5 in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {}
/* iPhone 5 in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {}
/* iPhone 2G-4S in portrait & landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}
/* iPhone 2G-4S in landscape */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {}
/* iPhone 2G-4S in portrait */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){}
/* CSS для Retina устройств */ @media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min—moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {/* CSS */}

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

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

sampleweb.ru

Условия в CSS

2012-12-26 css media if

Условия в CSS они же медиа запросы (CSS media queries), используются для переключения/подключения CSS в зависимости от некоторых условий (свойств аппаратуры), часто применяются в css фреймворках.

Пример использования:

@media screen and (min-width: 1024px) {
  #sidebar { width: 220px; }
}
@media screen and (max-width: 1023px) {
  #sidebar { width: 110px; }
}

В данном примере условия работают для экранов мониторов (screen), и если ширина окна будет 1024px и более то будет активный 1-ый блок (=220px), если ширина окна будет 1023px и менее то будет активный 2-й блок (=110px).

Пример использования условий при подключении css файла:

<link rel="stylesheet" media="all and (min-device-width: 600)" href="/style.css" />

Некоторые из параметров:

min-width, max-width	Минимальная/максимальная ширина окна
min-height, max-height	Минимальная/максимальная высота окна
min-device-width, max-device-width	Минимальная/максимальная ширина экрана
min-device-height, max-device-height	Минимальная/максимальная высота экрана

Условия по девайсам:

all	Любые устройства
screen	Экраны мониторов
print	Принтеры
handheld	Смарфоны и аналоги
tv	Телевизоры
projection	Проекторы

Совместимость

Эта возможность появилась в CSS3, работает в:
Chrome, Firefox 3.6+, Safari 4+, Opera 10, IE 9+, Android 2+, iOS 2+

О других свойствах можно прочитать тут developer.mozilla.org

py-my.ru

Что такое CSS? Общее знакомство

Главная
->
Материалы
->
Что такое CSS? Общее знакомство

Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс «Практика HTML5 и CSS3»

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный курс «Сайт на WordPress»

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

Что такое CSS? Общее знакомство

CSS — это аббревиатура от Cascading Style Sheets (Каскадные Таблицы Стилей). По сути, это синтаксическая структура, позволяющая получить всесторонний контроль над визуальным представлением web-страницы.

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

Основное преимущество CSS над более старым, классическим способом оформления и структурирования web-страницы — это возможность полностью отделить разметку страницы (т.е. ее логическую структуру) от оформления страницы (т.е. задания элементам определенных параметров отображения).

Давайте рассмотрим простой пример.

При отсутствии CSS мы вынуждены писать в HTML-коде вещи наподобие:


<p><font size="2" color="black" face="Arial">Какой-то текст.</font></p>

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

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

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

Кроме того, идет «замусоривание» кода повторяющимися конструкциями, что само по себе непрофессионально.

Что мы можем сделать в случае использования CSS?

Мы можем создать так называемый класс (точнее, селектор класса):


.par{
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

В данном классе с названием «par» мы пишем, что должен использоваться шрифт Arial черного цвета размером в 12 пикселей.

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


<p class = "par">Какой-то текст.</p>

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

Для этого существует другой способ. Мы воспользуемся здесь так называемым селектором типа:


p {
   font-size: 12px;
   color: #000000;
   font-family: Arial;
}

Что означает данная запись? Она означает, что ко всем элементам p — то есть ко всем параграфам на странице сразу будет применено то оформление, которое мы указали. Заметьте, что в данном случае от нас уже не требуется выполнять каких-то дополнительных указаний. Мы просто пишем:


<p>Какой-то текст.</p>
<p>Другой текст.</p>

И так далее. Ко всем параграфам в данном случае будут применены указанные нами параметры оформления.

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

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


.attention{
    font-size: 12px;
    font-weight: bold;
    color: #CC0000;
    font-family: Arial;
}

В нем мы изменили цвет шрифта на красный и придали шрифту жирность с помощью свойства font-weight. Теперь мы можем придать отдельным элементам (в нашем случае — параграфам) новое оформление. При этом оформление остальных параграфов останется без изменений


<p class = "attention">Какой-то текст.</p>
<p>Другой текст.</p>
<p class = "attention">Еще текст</p>

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

Для начала рассмотрим общую структуру любого правила CSS:

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

Селекторами в нашем случае были «.par», «p» и «.attention».

Свойствами в нашем примере являются, например «font-size», «color» и др.

Значения же — это, например, «12px», «#CC0000» и др.

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


font-family: Verdana, Arial, Helvetica;

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


селектор1, селектор2, селектор3 {
    свойство: значение;
    свойство: значение, значение, значение;
}

В качестве иллюстрации можно привести такой пример:


p,h4,h5 {
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

Как вы уже поняли, данное правило задает одинаковое оформление для всех элементов p и заголовков h4 и h5.

Рассмотрев вкратце общую структуру любого правила, давайте вернемся к вопросу селекторов и рассмотрим их более подробно.

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

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


.par{
    font-size: 12px;
    color: #000000;
    font-family: Arial;
}

Мы можем его применить как к параграфу, (что мы уже проделывали) так и к любому другому подходящему элементу на странице:


<p class = "par">Текст параграфа</p>

<h3 class = "par">Текст заголовка</h3>

<ul class = "par">
<li>элемент 1</li>
<li>элемент 2</li>
<li>элемент 3</li>
</ul>

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

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

Селекторы ID (Селекторы идентификатора) — похожи на селекторы класса с тем отличием, что они могут использоваться в документе только один раз. Такие селекторы обычно используют для задания параметров каких-то уникальных объектов или элементов на web-странице, которые точно не будут повторяться.

В качестве наиболее распространенного способа их использования можно привести в пример деление страницы на логические блоки наподобие: header, top_navigation, content, footer и т.п. Обычно на странице только один хэдер, один футер, одна область контента и т.д.

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

Для создания селектора ID используется знак решетки:


div#content{
    line-height: 1.3;
    margin: 0px 170px;
    background: #ffffff;
}

Данный код устанавливает межстрочный интервал в значение 1.3, отступы сверху и снизу в 0 пикселей, слева и справа — в 170 пикселей, и белый цвет фона.

Для применения данного стиля пишем следующее:


<div id = "content">
Основной контент страницы
</div>

Селекторы потомка — селекторы, идущие следом за селекторами типа и класса и переопределяющие назначенные ими стили.

Как это применить на практике? Предположим, что в блоке content внутри параграфа нам нужен шрифт Verdana с размером 12 пикселей. При этом в блоке footer внутри параграфа мы хотим использовать чуть более мелкий — размером в 11 пикселей шрифт Arial.


div#content p{
    font-size: 12px;
    font-family: Verdana;
}

div#footer p{
    font-size: 11px;
    font-family: Arial;
}

Это был пример с использованием селектора потомка за селектором типа.

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


div#content div.grey_line{
    width:623px;
    border-top: 1px solid #D8D8D8;
    margin: 10px;
}

Данным правилом мы указываем, какие правила применять к элементу div имеющему класс «grey_line» и находящемуся внутри другого элемента div с ID равным «content». В нашем случае это будет простая сплошная светло-серая линия шириной 623 пикселя, толщиной в 1 пиксел и отступом от других элементов в 10 пикселей.

Можно применять и комбинированные варианты, вроде:


div#content div.center p{
    text-align: center;
}

В данном примере еще более глубокая «вложенность»: Если в контейнере div с ID равным «content» есть контейнер div с классом «center», и внутри этого контейнера есть параграф, то текст в параграфе будет выровнен по центру содержащего элемента (то есть контейнера div с классом «center»).

Еще один пример:


div#footer table{
    text-align: center;
    width: 984px;
    height: 50px;
}

Здесь мы указали, что если в контейнере div с ID «footer» встретится тэг table, то ширина этой таблицы должна быть 984 пикселя, высота — 50 пикселей, а весь текст внутри таблицы будет выровнен по центру.

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

Именно в этом и заключается одна из особенностей CSS — «каскадное» создание правил: для элементов более высокого уровня задаются наиболее общие правила. Для тех элементов, которые заключены в этот основной элемент задаются более частные правила, которые применимы только к ним, но не к содержащему их элементу. Предположим, что на странице мы хотим всегда использовать шрифт Arial.

Мы указываем это:


body{
    font-family: Arial;
}

Далее, у нас есть блок div с ID «content», где мы хотим использовать шрифт размером в 12 пикселей в параграфах, и 11 пикселей в параграфах внутри таблицы:


#content p{
    font-size:12px;
}

#content table p{
    font-size:11px;
}

Внутри обычных параграфов вне таблицы и внутри параграфов в таблице мы не хотим использовать подчеркивания для ссылок если они там встречаются:


#content p a{
    text-decoration:none;
}

#content table p a{
    text-decoration:none;
}

Предположим также, что у нас в блоке div «content» может встречаться блок div с классом «extra» — и для параграфов внутри такого блока мы хотим добавить жирное начертание и размер шрифта в 13 пикселей, при этом ссылки внутри параграфа в блоке «extra» должны еще подчеркиваться снизу чертой:


#content div.extra p{
    font-size:13px;
    font-weight:bold;
}

#content div.extra p a{
    text-decoration:underline;
}

Если вы присмотритесь к приведенным выше примерам, то заметите эту своеобразную «каскадность»: самое общее правило мы задаем для тэга body — шрифт. Затем для различных случаев внутри блока div «content» мы указываем различный размер шрифта. Затем для ссылок внутри параграфа и внутри параграфа в таблицах мы указываем отсутствие подчеркивания. Также прописываем дополнительные правила для блока div с классом «extra» внутри блока div с ID «content», включая отображение шрифта и подчеркивание ссылок.

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

Нам нет необходимости писать для «#content div.extra p a» свойство «font-weight», так как оно было указано для «#content div.extra p». Таким образом уменьшается общий размер CSS-файла, так как не нужно дублировать одни и те же строки.

Возьмем последний пример и немного его переделаем:


#content div.extra p{
    font-size:13px;
    font-weight:bold;
}

#content div.extra p a{
    font-size:14px;
    text-decoration:underline;
    color: red;
}

Что мы сделали? Первая часть осталась без изменений. Вторую мы изменили так, что теперь у нас текст ссылки будет размером в 14 пикселей (мы переопределили предыдущее значение в 13 пикселей), подчеркивание остается, как и было, и цвет текста ссылки будет красным (новое правило, которое не было задано ранее).

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

Если нам нужно изменить отображение какого-то элемента, то мы переопределяем свойство, которое «тянулось сверху» и заменяем его на нужное нам. Также можно добавить какие-то дополнительные свойства к уже существующим. Все это мы и проделали в предыдущем примере.

Рассмотрим еще два достаточно важных момента при использовании таблиц стилей.

Псевдоклассы

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


a:link{
    color:blue;
}
a:visited{
    color:purple;
}
a:hover{
    color:red;
}
a:active{
    color:gray;
}

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

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

С помощью псевдоэлементов возможно применить стиль к какой-то части web-страницы, которая не является элементом.

Рассмотрим два примера:


p:first-letter{
    font-size: 180%;
    font-weight:bold;
}

p:first-line{
    font-size: 150%;
    color:blue;
}

В первом примере мы придаем первой букве абзаца размер в 180% от заданного для абзаца, и жирное начертание. Во втором — задаем для первой строки параграфа размер шрифта в 150% и синий цвет текста.

Как связать стили c web-страницей?

Существует три способа для применения CSS к документам.

1. Встроенный

В этом случае для элемента, которому мы хотим придать стиль, мы пишем непосредственно в HTML-коде конструкцию вида:


<p style = "font-family: Verdana; font-size:12px; font-weight: bold;">
Здесь текст параграфа</p>

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

2. Внутренний

В этом случае в начале HTML-страницы, между открывающим и закрывающим тэгами head помещается конструкция вида:


<style>
<!--
#header{
    width:100%;
    height:100px;
}
.title{
    font-size:14px;
}
-->
</style>

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

Такой способ часто используется в процессе разработки страницы. Наконец, третий, последний способ используется чаще всего, так как он наиболее удобен.

3. Внешний

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


<head>
<link href="base_style.css" rel="stylesheet" type="text/css">
</head>

Обратите внимание, что при данном типе подключения не нужно использовать тэг style и комментарии HTML, то есть содержание файла base_style.css в нашем примере может быть таким:


#header{
    width:100%;
    height:100px;
}
.title{
    font-size:14px;
}

Резюмируем

Селекторы ID применяются к уникальным объектам на странице. Селекторы класса могут применяться на странице многократно, с различными элементами.

Для обозначения селекторов ID используется знак «#». Для селекторов класса используется «.»

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

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

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

Дмитрий Науменко

P.S. Если вы изучаете CSS для того, чтобы освоить верстку сайтов, также рекомендую вам серию бесплатных видео по резиновой верстке сайта и бесплатный курс по основам адаптивной верстки. Эти материалы помогут вам продвинуться вперед гораздо быстрее:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Смотрите также:

Наверх

www.codeharmony.ru

Правила | CSS справочник

Правило	Описание	Chrome	Firefox	Opera	Safari	IExplorer	Edge
@charset	Задает кодировку символов, которая будет использоваться в таблице стилей. Правило должно быть указано самым первым элементом (запрещается использование любых символов до этого правила). Если указано несколько правил, которые определяют кодировку, то браузером будет использовано только первое.	Да	Да	Да	Да	Да	Да
@font-face	Правило, которое позволяет веб-сайтам скачать и использовать шрифты, отличные от «безопасных веб-шрифтов».	4.0*	3.5*	9.0*	3.1*	6.0*	12.0*
@font-feature-values	Позволяет использовать общее название в font-variant-alternate (активируются по-разному в шрифтах OpenType). Это позволяет упростить CSS при использовании нескольких шрифтов.	Нет	34.0	Нет	Нет	Нет	Нет
@import	Используется для импорта содержимого CSS файла в текущую таблицу стилей. Это правило должно предшествовать всем другим видам правил, за исключением правила @charset.	Да	Да	Да	Да	Да	Да
@keyframes	Позволяет контролировать промежуточные этапы анимации путем создания ключевых кадров (или точки) в процессе анимации.	43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0
@media	Правило, которое используется для изменения CSS стилей на основании определенных характеристик устройства, связанных с отображением контента, таких как ширина, высота, ориентация, разрешение экрана и так далее. Имеет широкое применение в адаптивном веб-дизайне.	21.0	3.5	9.0	4.0	9.0	12.0

basicweb.ru

css — Как сделать условия IE в CSS?

Цель ВСЕ ВЕРСИИ IE

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

Целевое все EXCEPT IE

<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

ТОЛЬКО ТОЛЬКО для IE 7

<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->

ТОЛЬКО ТОЛЬКО IE 6

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

ТОЛЬКО ТОЛЬКО IE 5

<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->

ТОЛЬКО ТОЛЬКО IE 5.5

<!--[if IE 5.5000]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Цель IE 6 и LOWER

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-down.css" />
<![endif]-->

Target IE 7 и LOWER

<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

Цель IE 8 и LOWER

<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

Цель IE 6 и ВЫШЕ

<!--[if gt IE 5.5]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

<!--[if gte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6-and-up.css" />
<![endif]-->

Целевой IE 7 и ВЫСОКИЙ

<!--[if gt IE 6]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie7-and-up.css" />
<![endif]-->

Целевой IE 8 и ВЫСОКИЙ

<!--[if gt IE 7]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

<!--[if gte IE 8]>
<link rel="stylesheet" type="text/css" href="ie8-and-up.css" />
<![endif]-->

Для полной справки по этой теме, Chris Coyier: Как создать только стили для IE

qaru.site

CSS селекторы

Селектор — это часть CSS-правила, которая сообщает браузеру, к какому элементу (или элементам) веб-страницы будет применён стиль.

Термин селектор может относиться к простому селектору (simple selector), составному селектору (compound selector), сложному селектору (complex selector) или списку селекторов.

К простым селекторам относятся:

селектор типа
универсальный селектор
селекторы атрибутов
селектор идентификатора
селектор класса
псевдо-классы

CSS селектор	Пример	Описание	CSS
.class	`.myClass`	Выбирает все элементы с классом myClass (`class="myClass"`).	1
#id	`#main`	Выбирает элемент с идентификатором main (`id="main"`).	1
*	`*`	Выбор всех элементов.	2
элемент	`span`	Выбор всех элементов `<span>`.	1
элемент,элемент	`div,span`	Выбор всех элементов `<div>` и всех элементов `<span>`.	1
[атрибут]	`[title]`	Выбирает все элементы с атрибутом `title`.	2
[атрибут=»значение»]	`[title="cost"]`	Выбирает все элементы с атрибутом `title`, значение которого в точности совпадает со значением указанным в селекторе (`title="cost"`).	2
[атрибут~=»значение»]	`[title~="один"]`	Выбирает все элементы с атрибутом `title`, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова) «один» (`title="один и два"`).	2
[атрибут\|=»значение»]	`[lang\|="ru"]`	Выбор всех элементов с атрибутом `lang`, значение которого начинается с «ru».	2
[атрибут^=»значение»]	`a[href^="https"]`	Выбор каждого элемента `<a>` с атрибутом `href`, значение которого начинается с «https».	3
[атрибут$=»значение»]	`[src$=".png"]`	Выбирает все элементы с атрибутом `src`, значение которого оканчивается на «.png» (`src="some_img.png"`).	3
[атрибут*=»значение»]	`[title*="один"]`	Выбирает все элементы с атрибутом `title`, в значении которого (в любом месте) встречается подстрока (в виде отдельного слова или его части) «один» (`title="один и два"`).	3

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


span[title].className
p.className1.className2#someId:hover

Сложный селектор — это последовательность селекторов, которые разделены комбинаторами.

Список селекторов — это селекторы, перечисленные через запятую.

Комбинаторы

Для объединения простых CSS селекторов, используются комбинаторы, которые указывают взаимосвязь между простыми селекторами. Существует несколько различных комбинаторов в CSS2, и один дополнительный в CSS3, когда вы их используете, они меняют характер самого селектора.

Комбинатор	Пример	Описание	CSS
элемент элемент	`div span`	Выбор всех элементов `<span>` внутри `<div>`.	1
элемент>элемент	`div>span`	Выбирает все дочерние элементы `<span>`, у которых родитель — элемент `<div>`.	2
элемент+элемент	`div+p`	Выбирает все элементы `<p>`, которые расположены сразу после элементов `<div>`.	2
элемент1~элемент2	`p~ol`	Выбор всех элементов `<ol>`, которым предшествует элемент `<p>`.	3

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

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

Псевдо-класс	Пример	Описание	CSS
:link	`a:link`	Выбор всех не посещенных ссылок.	1
:visited	`a:visited`	Выбор всех посещенных ссылок.	1
:active	`a:active`	Выбор активной ссылки.	1
:hover	`a:hover`	Выбор ссылки при наведении курсора мышки.	1
:focus	`input:focus`	Выбор элемента `<input>`, который находится в фокусе.	2
:first-child	`p:first-child`	Выбор каждого элемента `<p>`, который является первым дочерним элементом своего родителя.	2
:lang(язык)	`p:lang(ru)`	Выбор каждого элемента `<p>` с атрибутом `lang`, значение которого начинается с «ru».	2
:first-of-type	`p:first-of-type`	Выбор каждого элемента `<p>`, который является первым из элементов `<p>` своего родительского элемента.	3
:last-of-type	`p:last-of-type`	Выбор каждого элемента `<p>`, который является последним из элементов `<p>` своего родительского элемента.	3
:only-of-type	`p:only-of-type`	Выбор каждого элемента `<p>`, который является единственным элементом `<p>` своего родительского элемента.	3
:only-child	`p:only-child`	Выбор каждого элемента `<p>`, который является единственным дочерним элементом своего родительского элемента.	3
:nth-child(n)	`p:nth-child(2)`	Выбор каждого элемента `<p>`, который является вторым дочерним элементом своего родительского элемента.	3
:nth-last-child(n)	`p:nth-last-child(2)`	Выбор каждого элемента `<p>`, который является вторым дочерним элементом своего родительского элемента, считая от последнего дочернего элемента.	3
:nth-of-type(n)	`p:nth-of-type(2)`	Выбор каждого элемента `<p>`, который является вторым дочерним элементом `<p>` своего родительского элемента.	3
:nth-last-of-type(n)	`p:nth-last-of-type(2)`	Выбор каждого элемента `<p>`, который является вторым дочерним элементом `<p>` своего родительского элемента, считая от последнего дочернего элемента.	3
:last-child	`p:last-child`	Выбор каждого элемента `<p>`, который является последним элементом своего родительского элемента.	3
:root	`:root`	Выбор корневого элемента в документе.	3
:empty	`p:empty`	Выбор каждого элемента `<p>`, который не содержит дочерних элементов (включая текст).	3
:target	`:target`	Выбор текущего целевого элемента на странице, то есть элемента, к которому был осуществлён переход по ссылке внутри страницы.	3
:enabled	`input:enabled`	Выбор каждого включенного элемента `<input>`.	3
:disabled	`input:disabled`	Выбор каждого выключенного элемента `<input>`.	3
:checked	`input:checked`	Выбор элемента `<input>`, выбранного по умолчанию или пользователем.	3
:not(селектор)	`:not(p)`	Выбор всех элементов, кроме элемента `<p>`.	3

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

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

Псевдо-элемент	Пример	Описание	CSS
::first-letter	`p::first-letter`	Выбор первой буквы каждого элемента `<p>`.	1
::first-line	`p::first-line`	Выбор первой строки каждого элемента `<p>`.	1
::before	`p::before`	Добавляет элемент с содержимым перед содержимым каждого элемента `<p>`.	2
::after	`p::after`	Добавляет элемент с содержимым после содержимого каждого элемента `<p>`.	2

puzzleweb.ru

Штирлиц — Сеть печатных салонов в Перми

Css условия – Можно ли задать условие в CSS? — Toster.ru

30 CSS-селекторов, о которых полезно помнить

30 CSS-селекторов, о которых полезно помнить

Условия CSS для разрешений экрана

Условия в CSS

Некоторые из параметров:

Условия по девайсам:

Совместимость

Что такое CSS? Общее знакомство

Что такое CSS? Общее знакомство

Правила | CSS справочник

css — Как сделать условия IE в CSS?

CSS селекторы

Комбинаторы

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

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

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