all в CSS


Содержание

CSS all

The CSS all property resets all CSS properties (except direction and unicode-bidi ).

This property can be handy for styling items such as widgets, that need to be styled independently of the outer page. In such cases, styles from the outer page could ruin the display of the widget if they are allowed to cascade down.

Syntax

Possible Values

Represents the value specified as the property’s initial value.

This value effectively resets all properties and block all inheritance as if no styles had been applied to the content. It therefore blocks any style sheet from the page from cascading down to the element. It also blocks browser/user agent styles, as well as any user specified styles.

Because of this, you may need to re-establish certain styles, such as display: block on

inherit Represents the computed value of the property on the element’s parent (i.e. inherits property values from the parent). unset Acts as either inherit or initial , depending on whether the property is inherited or not (i.e. sets all properties to their parent value if they are inheritable or to their initial value if not inheritable).

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • The all property is defined in the CSS Cascading and Inheritance Level 3 (W3C Candidate Recommendation, 19 May 2020)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Основы CSS — Руководство для самых маленьких

Приветствую, дорогие друзья! В этом уроке вы узнаете что такое CSS, для чего нужен и как его правильно использовать. Это базовый урок из серии «Для самых маленьких», в котором я постараюсь объяснить наиболее понятным языком основы стилизации документов посредством CSS — Каскадных таблиц стилей (Cascading Style Sheets).

Часть 1. Основы CSS

Данный урок является логическим продолжением урока «Основы HTML для начинающих», в котором я подробно объяснял, что такое язык разметки HTML, как он устроен и работает, базовые теги и правила верстки. В данном же уроке мы затронем стилизацию документа, созданного с использованием языка разметки, т.е. придание определенной формы, определенного цвета, последовательности, размеров различных элементов и текста на странице, рассмотрим наиболее эффективные приемы работы с каскадными таблицами стилей. Поняв основы, вы сможете самостоятельно правильно и эффективно стилизовать HTML документы.

Обращаю ваше внимание, что в данном руководстве мы будем рассматривать CSS только в контексте использования с HTML документами в веб-браузере. С помощью CSS можно стилизовать и другие документы, использующие различные языки разметки. Например, стилизовать XML в Android приложениях, SVG или различные Desktop Environment в Unix-подобных операционных системах.

Вообще, CSS довольно элементарный формальный язык, который придумали для описания внешнего вида документов. Это говорит о том, что он довольно прост и состоит из самобытных примитивных конструкций, которые не так сложны для изучения. Самое сложное не синтаксис, не правила написания конструкций, а огромное количество CSS свойств для запоминания, которые выполняют различные задачи. Благо, все правила англоязычные с соответствующей смысловой нагрузкой. Простой перевод на наш язык дает понятие о том, что это правило делает и наоборот — при переводе того, что мы хотим добиться определенным свойством на английский язык, велика вероятность того, что мы получим правильное свойство. Это значительно упрощает запоминание CSS правил на интуитивном уровне. Например, если нужно задать фоновый цвет достаточно сделать перевод на английский, в результате чего получаем background-color (отдельные слова в CSS пишутся через дефис).

1.1 Использование CSS в HTML документах

CSS довольно просто использовать в HTML документах. Его можно:

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

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

Инлайновое использование CSS свойств в конкретных тегах с помощью атрибута style.

Такой способ внутренней стилизации используется очень редко в особых случаях, когда необходимо: А. Вывести из админ. панели сайта параметры для конкретных тегов; Б. Сделать динамическую стилизацию элементов посредством JavaScript.

Пример инлайнового вывода фонового изображения секции из админ. панели сайта:

Вывод $bgi_option — простой пример, показывающий что значение свойства задается в админке сайта.

1.2 CSS синтаксис

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

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

Просто, не правда ли?

Самое сложное в CSS объявлении — селектор. Подробнее узнать о том, как формируются и как используются селекторы вы можете в уроке Все CSS селекторы в одном уроке — это очень важная тема, так как здесь раскрывается вся магия выборки элементов на странице, рекомендую посмотреть этот урок в обязательном порядке всем новичкам.

Вкратце CSS селектор — (от слова select — выбирать) — это конструкция, с которой начинается каждый блок объявлений и которая служит для выборки элемента или однотипных элементов на странице для дальнейшей стилизации. Чаще всего в качестве селектора используется определенный класс тега, например:

Здесь селектором выступает класс my-class тега div, который получает необходимое оформление в CSS файле. В данном случае фоновый цвет — серый. Соответственно, если на странице есть несколько тегов (не только div) с классом my-class, все эти элементы получат одинаковое оформление — серый фон цвета #999.

1.3 Каскадирование, наследование и приоритет

Понять принцип каскадирования несложно. Давайте взглянем на пример:

Из примера мы видим, что в CSS написан каскад, в котором класс .parent стоит на первом месте, после него через пробел указан дочерний класс .children, который отвечает уже за стилизацию только дочернего элемента. Дочерний тег обязательно должен быть вложен в тег с классом .parent. Если в HTML документе мы вынесем тег .children из тега div с классом .parent, он потеряет свое оформление, так как каскад уже не будет работать, структура нарушена.

Что мы получим в результате нашего примера. Тег с классом .children получит цвет текста #666, так как имеет более длинный каскад, а .parent покрасится в цвет #999. Родительский класс будет иметь внутренние отступы 10px, в то время, как дочерний этих отступов иметь не будет, так как свойство padding не распространяется на дочерние элементы. Однако если мы уберем color: #666; у селектора .parent .children, то его текст покрасится в цвет родителя color: #999;

Каскадирование и наследование позволяют стилизовать конкретные элементы на странице и определять приоритет применяемых стилей. Давайте рассмотрим иерархию приоритетов.

  1. Самым высоким приоритетом обладают свойства, в конце объявления которых указана конструкция !important. Не важно, какую вложенность имеет селектор, каким образом используются стили — инлайново или подключением внешнего файла, у них будет наибольший приоритет. Я крайне не рекомендую использовать !important при стилизации, так как в процессе поддержки или даже в процессе разработки в дальнейшем обязательно возникнет путаница, которую спасет только рефакторинг стилей. Как показывает практика, всегда есть способ не использовать !important.
    Пример использования !important:
  2. Следующим по значимости приоритетом обладают инлайновые стили, прописанные в самом теге через атрибут style, которые мы рассмотрели ранее:
  3. Стили, заданные в теге style в самом документе имеют меньший приоритет;
  4. Ещё меньшим приоритетом обладают стили, подключенные к документу как внешний CSS файл посредством тега
  5. Самый низкий приоритет, окромя стандартных стилей браузера имеют стили родительских селекторов перед дочерними, например:
    В результате тег

, находящийся в теге с классом .my-class получит значение свойства margin: 15px.

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

И т.д. по логической цепочке.

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

В результате последний селектор в потоке документа получит значение свойства margin: 15px, так как является наиболее приоритетным. Однако если бы селектор первого объявления был длиннее, значния его свойств несомненно бы превалировали.

Что касается наследования, здесь всё просто. Все дочерние элементы наследуют некоторые свойства родителя. Какие именно свойства наследуются предстоит выяснить вам в процессе изучения различных свойств и применении их на практике. Например, цвет текста всегда наследуется потомками, а отступы — нет.

Часть 2. CSS свойства

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

Однако рассмотрим 10 самых используемых CSS свойств в верстке. Я взял 10 больших CSS файлов из своих проектов и отсортировал свойства по частоте использования.

CSS Свойство

Частота использования

Описание

color 960 раз Цвет текста элемента: background-color 755 раз Цвет фона элемента: font-size 524 раза Размер шрифта: opacity 435 раз Уровень прозрачности элемента: padding 372 раза Размер полей внутри элемента: width 356 раз Ширина блочного элемента, не включая размеры границ и полей: margin 311 раз Внешние отступы элемента: height 305 раз Высота блочного элемента, не включая размеры границ и полей: font-weight 280 раз Насыщенность шрифта: text-align 245 раз Горизонтальное выравнивание текста:

Часть 3. Медиа-запросы

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

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

Медиа-запрос пишется в самом файле стилей или в теле документа (тег style) и начинается с объявления правила @media. Структура медиа запроса довольно проста:

Условием может выступать либо устройство — all (все устройства), screen, print, tv и т.д., либо медиа-функции, которые задают параметры устройства или разрешение экрана, на котором отображается документ.

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

Здесь устройства с максимальным разрешением экрана 480px или минимальным разрешением 320px будут отображать текст тега с классом .my-class серым. Данное условие я привел для примера, практически оно бесполезно. Чаще всего требуется указать либо только максимальное разрешение, либо только минимальное, в пределах которого будет прменяться свойство.

Кроме всего прочего, как мы видим из примера, функции могут содержать условия and (И), not (НЕ) и only (Для старых браузеров, не поддерживающих медиа-запросы). Нет логического оператора or (ИЛИ), его роль выполняет запятая. Медиа-функции, как мы видим заключают в обычные круглые скобки.

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

Часть 4. Рекомендации

Ну и конечно-же мои рекомендации. За всю практику верстки у меня накопились некоторые правила, которыми я с радостью поделюсь.

  1. Старайтесь использовать только внешние подключаемые CSS файлы. Внутреннюю стилизацию применяйте только если это необходимо для корректного функционирования веб-сайта;
  2. Старайтесь стилизовать только классы. Не стилизуйте идентификаторы (задаются через >

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Создание современного интернет-магазина от А до Я

Я — фрилансер! — Руководство успешного фрилансера

Can I use CSS all property?

Compatibility table for support of CSS all property in desktop and mobile browsers.

Legend

  • Green = Supported
  • Red = Not supported
  • Greenish yellow = Partial support
  • Gray = Support unknown

CSS all property

Global usage

A shorthand property for resetting all CSS properties except for direction and unicode-bidi .

  1. 5.5

  2. 6
  3. 7
  4. 8
  5. 9
  6. 10
  7. 11
  1. 12
  2. 13
  3. 14
  4. 15
  5. 16
  6. 17
  7. 18
  8. 76

Firefox

  1. 2
  2. 3
  3. 3.5
  4. 3.6
  5. 4
  6. 5
  7. 6
  8. 7
  9. 8
  10. 9
  11. 10
  12. 11
  13. 12
  14. 13
  15. 14
  16. 15
  17. 16
  18. 17
  19. 18
  20. 19
  21. 20
  22. 21
  23. 22
  24. 23
  25. 24
  26. 25
  27. 26
  28. 27
  29. 28
  30. 29
  31. 30
  32. 31
  33. 32
  34. 33
  35. 34
  36. 35
  37. 36
  38. 37
  39. 38
  40. 39
  41. 40
  42. 41
  43. 42
  44. 43
  45. 44
  46. 45
  47. 46
  48. 47
  49. 48
  50. 49
  51. 50
  52. 51
  53. 52
  54. 53
  55. 54
  56. 55
  57. 56
  58. 57
  59. 58
  60. 59
  61. 60
  62. 61
  63. 62
  64. 63
  65. 64
  66. 65
  67. 66
  68. 67
  69. 68
  70. 69
  71. 70
  72. 71
  73. 72

Chrome

  1. 4
  2. 5
  3. 6

  4. 7
  5. 8
  6. 9
  7. 10
  8. 11
  9. 12
  10. 13
  11. 14
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 59
  57. 60
  58. 61
  59. 62
  60. 63
  61. 64
  62. 65
  63. 66
  64. 67
  65. 68
  66. 69
  67. 70
  68. 71
  69. 72
  70. 73
  71. 74
  72. 75
  73. 76
  74. 77
  75. 78
  76. 79
  77. 80
  78. 81

Safari

  1. 3.1
  2. 3.2
  3. 4
  4. 5
  5. 5.1
  6. 6
  7. 6.1
  8. 7
  9. 7.1
  10. 8
  11. 9
  12. 9.1
  13. 10
  14. 10.1
  15. 11
  16. 11.1
  17. 12
  18. 12.1
  19. 13

  20. TP

Opera

  1. 9
  2. 9.5-9.6
  3. 10.0-10.1
  4. 10.5
  5. 10.6
  6. 11
  7. 11.1
  8. 11.5
  9. 11.6
  10. 12
  11. 12.1
  12. 15
  13. 16
  14. 17
  15. 18
  16. 19
  17. 20
  18. 21
  19. 22
  20. 23
  21. 24
  22. 25
  23. 26
  24. 27
  25. 28
  26. 29
  27. 30
  28. 31
  29. 32
  30. 33
  31. 34
  32. 35
  33. 36
  34. 37
  35. 38
  36. 39
  37. 40
  38. 41
  39. 42
  40. 43
  41. 44
  42. 45
  43. 46
  44. 47
  45. 48
  46. 49
  47. 50
  48. 51
  49. 52
  50. 53
  51. 54
  52. 55
  53. 56
  54. 57
  55. 58
  56. 60
  57. 62
  58. 63
  59. 64

iOS Safari

  1. 3.2
  2. 4.0-4.1
  3. 4.2-4.3
  4. 5.0-5.1
  5. 6.0-6.1
  6. 7.0-7.1
  7. 8
  8. 8.1-8.4
  9. 9.0-9.2
  10. 9.3
  11. 10.0-10.2
  12. 10.3
  13. 11.0-11.2
  14. 11.3-11.4
  15. 12.0-12.1
  16. 12.2-12.4
  17. 13.0-13.2

Opera Mini

Android Browser

  1. 2.1
  2. 2.2
  3. 2.3
  4. 3
  5. 4
  6. 4.1
  7. 4.2-4.3
  8. 4.4
  9. 4.4.3-4.4.4
  10. 76


Blackberry Browser

Opera Mobile

  1. 10
  2. 11
  3. 11.1
  4. 11.5
  5. 12
  6. 12.1
  7. 46

Chrome for Android

Firefox for Android

IE Mobile

UC Browser for Android

Samsung Internet

  1. 4
  2. 5.0-5.4
  3. 6.2-6.4
  4. 7.2-7.4
  5. 8.2
  6. 9.2
  7. 10.1

QQ Browser

Baidu Browser

KaiOS Browser

Browser support tables for modern web technologies

Created & maintained by @Fyrd, design by @Lensco.

Support data contributions by the GitHub community.

Usage share statistics by StatCounter GlobalStats for October, 2020

30 селекторов CSS, которые нужно запомнить

Дата публикации: 2010-12-11

От автора: Итак, вы выучили основные селекторы css: id, class, наследование – и довольны? Если да, то вы упускаете гигантский объем гибкости. Хотя многие селекторы, упомянутые в этой статье, являются частью спецификации CSS3 и, следовательно, имеются в наличие только на современных браузерах, вы должны их запомнить.

Давайте перед тем, как перейти к более продвинутым селекторам CSS, мы с новичками одолеем самые простые и очевидные.

Знак звездочки выберет каждый отдельный элемент страницы. Многие разработчики используют этот прием для обнуления margin и padding. Хотя он, безусловно, хорош для быстрых проверок, я бы советовал вам никогда не пользоваться им в продуктивном коде. Он добавляет слишком много веса браузеру и не является необходимым.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Звездочку * также можно использовать для дочерних селекторов.

Он выберет каждый отдельный элемент, являющийся дочерним div’у #container. И еще раз, старайтесь не пользоваться этим приемом слишком часто, или вообще не пользуйтесь.

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

Указание символа # в качестве префикса селектора позволяет делать выборку по id. Это, бесспорно, самое обычное использование, однако при использовании селекторов id будьте осмотрительны.

Спросите себя: мне совершенно необходимо привязать id для выборки к этому элементу?

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

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

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

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

4. X Y

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

Профессиональная подсказка – если ваш селектор выглядит как X Y Z A B.error, вы поступаете неправильно. Всегда спрашивайте себя, так ли уж абсолютно необходимо применять всю эту нагрузку.

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

Что, если нужно выбрать все элементы страницы соответственно их типу, нежели по имени их id или class’а? Сделайте проще и используйте селектор типа. Если нужно выбрать все неупорядоченные списки, примените ul <>.

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

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

Как альтернатива, у нас имеется псевдокласс :visited, который, как подразумевается, позволяет нам применять специальные стили только к тэгам-привязкам на странице, по которой уже щелкнули, или которую посетили.

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

7. X + Y

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

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

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

Селектор #container > ul выберет своей целью только те ul’ы, которые являются прямыми потомками div’а с id container. Он не выберет, например, ul –потомок первого li.

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

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

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

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

10. X[title]

Относимый к селекторам атрибутов, в вышеприведенном примере он выберет только тэги-привязки, имеющие атрибут title. Тэги-привязки, не имеющие его, не получат этого конкретного стиля. А что, если вам нужен более специальный случай ? Что ж…

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

11. X[href=»foo»]

Вышеприведенный фрагмент определит стили всем тэгам-привязкам, которые ссылаются на http://net.tutsplus.com; они получат наш фирменный зеленый цвет. Все прочие тэги-привязки останутся нетронутыми.

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

Работает хорошо, только слегка негибко. Что получится, если ссылка действительно направляет на Nettuts+, но, возможно, путь – это nettuts.com, а не полный url? В таких случаях можно использовать чуть-чуть нормального синтаксиса выражений.

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

12. X[href*=»nettuts»]

Вот сюда мы шли; вот то, что нам нужно. Звездочка обозначает, что действующее значение должно появиться где-то в значении атрибута. Таким образом покрывается nettuts.com, net.tutsplus.com, и даже tutsplus.com.

Помните, что это обширное утверждение. Что выйдет, если тэг-привязка соединяет с каким-то сайтом, расположенным не на Envato, со строкой tuts в url’е? Если нужно более точно определить, используйте ^ и & для ссылки соответственно на начало и конец строки.

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

13. X[href^=»http»]

Когда-нибудь интересовались, каким образом некоторые веб сайты могут отображать маленькую иконку рядом с внешними ссылками? Я уверен, вы такое уже видели; они отлично напоминают о том, что ссылка направит вас на совершенно другой веб сайт.

Это легко делается при помощи знака ^ («карат»). Чаще всего он используется в регулярных выражениях для обозначения начала строки. Если нужно выбрать все тэги-зацепки, имеющие href, начинающийся с http, можно применить селектор, подобный вышеуказанному фрагменту.

Обратите внимание, что мы не ищем http://; он не нужен и не несет ответственности за url’ы, начинающиеся с https://.

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

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

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

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

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

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

Вернитесь к номеру восемь; как можно скорректировать все эти разные типы изображений: png, jpeg,jpg, gif? Ну, мы могли бы создать множественные селекторы, такие как:

Но так мы создаем себе головную боль и, к тому же, это неэффективно. Другое возможное решение – применение пользовательских атрибутов. Что получится, если добавить свой собственный атрибут data-filetype к каждой привязке, ссылающейся на изображение?

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

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

16. X[foo

А вот особенность, которой можно удивить своих друзей. Об этом приеме знает не так уж много людей. Знак «тильда» (

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

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

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


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

17. X:checked

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

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

18. X:after

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

Многие познакомились с этими классами при первой встрече с хаком clear-fix.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

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

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

19. X:hover

Ой, да ладно! Этот вы знаете. Официальный термин для него: user action pseudo class (псевдокласс пользовательского действия). Название сбивает с толку, но на деле он не такой. Хотите, когда пользователь проводит мышью над элементом, применить специальные стили? Он выполнит эту работу!

Помните, что более старая версия Internet Explorer не отвечает на применение псевдокласса :hover к чему-либо, кроме тэга-ссылки.

Чаще всего мы используем этот селектор при применении к тэгам-привязкам, например, border-bottom , когда над ними проводят мышью.

Профессиональная подсказка — border-bottom: 1px solid black; смотрится лучше, чем text-decoration: underline;.

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

20. X:not(selector)

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

Или, если бы я хотел выбрать каждый отдельный элемент (не советую), кроме тэгов абзаца, можно было бы сделать:

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

21. X::pseudoElement

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

Псевдоэлемент состоит из двух двоеточий: ::

Выберите первую букву абзаца

Этот отрывок – выделение, которое найдет все абзацы на странице, а затем довыберет только первую букву этого элемента.

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

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

«Для совместимости с существующими таблицами стилей агенты пользователя также должны принимать нотацию (систему обозначений) одного предыдущего двоеточия для псевдоэлементов, представленных в уровнях 1 и 2 CSS (а именно: :first-line, :first-letter, :before и :after). Эта совместимость не предоставляется новым псевдоэлементам, представленным в этой спецификации» — источник

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

22. X:nth-child(n)

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

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

Можно даже употребить его, чтобы выбрать совокупность дочерних переменных. Например, мы могли бы сделать li:nth-child(4n) для выделения каждого четвертого пункта списка.

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

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

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

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

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

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

Временами вместо выбора дочернего элемента (child), вам понадобится выбрать согласно типу (type) элемента.

Представьте себе разметку, содержащую пять неупорядоченных списков. Если бы вы хотели присвоить стили только третьему ul’у и не имели уникального id для привязки, то могли бы использовать псевдокласс nth-of-type(n). Иметь вокруг себя рамку в верхнем фрагменте будет только третий ul.

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

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

Да, оставаясь до конца логичными, мы еще можем применить nth-last-of-type для того, чтобы начать с конца списка селекторов и продвигаться в обратную сторону для выборки нужного элемента.

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

26. X:first-child

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

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

Для корректировки этого многие дизайнеры применяют классы first и last. Вместо них можно использовать эти псевдоклассы.

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

27. X:last-child

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

Пример

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

Разметка

Здесь нет ничего особенного; всего лишь простой список.

CSS

Эти стили установят фон, удалят отступ браузера по умолчанию в ul, и применят к каждому li рамки для обеспечения глубины.

Для добавления в свои списки глубины примените border-bottom к каждому li, на оттенок или два темнее, чем цвет фона li. Затем примените border-top на пару оттенков светлее.

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

Вот так; все исправлено!

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

Ага … IE8 поддерживал :first-child , но не:last-child. Поди разберись!

28. X:only-child

Честно говоря, вы, вероятно, не слишком часто застанете себя за использованием псевдокласса only-child. Несмотря на все, если он понадобится, то вполне доступен.

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

Давайте представим следующую разметку.

My paragraph here.

Two paragraphs total.

Two paragraphs total.

В этом случае вторые абзацы div’а не будут выбраны; только первый div. Как только вы примените более одного дочернего элемента, псевдокласс only-child перестанет иметь эффект.

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

29. X:only-of-type

Этот структурный псевдокласс может использоваться несколькими хитрыми способами. Он выберет элементы, не имеющие сиблингов (элементов одного уровня) в своем родительском контейнере. В качестве примера давайте выберем все ul’ы, имеющие всего один пункт списка.

Во-первых, задайте себе вопрос, каким образом вы выполнили бы это задание? Вы могли бы сделать ul li, но так они выберут своей целью все пункты списка. Единственное решение – использовать only-of-type.

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

30. X:first-of-type

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

Проверка

Для лучшего понимания давайте проведем тест. Скопируйте в свой редактор кода следующую разметку:

My paragraph here.

Теперь, не читая дальше, попробуйте догадаться, как выбрать только «List Item 2″. Когда придете к решению (или сдадитесь), продолжите чтение.

Решение 1

Решить эту контрольную работу можно многими способами. Мы рассмотрим некоторые из них. Давайте начнем с использования first-of-type.

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

Решение 2

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

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

Решение 3

Можно вредить им или играть с этими селекторами, как угодно.

На этот раз мы берем первый ul на странице, затем находим самый первый пункт списка, но начинаем с конца!

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

Заключение

Если вы корректируете более старые браузеры, типа Internet Explorer 6, вам все же следует быть осторожным при использовании новых селекторов. Но, пожалуйста, не позволяйте отпугнуть вас от их изучения. Вы окажете себе этим медвежью услугу. Не стесняйтесь сверяться здесь со списком совместимости с браузерами. Как альтернативу можно использовать прекрасный скрипт IE9.js Dean Edward’а для предоставления этим селекторам поддержки в старых браузерах.

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


Спасибо за прочтение урока по селекторам CSS, надеюсь, вы усвоили пару приемов!

Перевод и редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Знаете ли вы селекторы?

CSS3-селекторы – фундаментально полезная вещь.

Даже если вы почему-то (старый IE?) не пользуетесь ими в CSS, есть много фреймворков для их кросс-браузерного использования CSS3 из JavaScript.

Поэтому эти селекторы необходимо знать.

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

Основных видов селекторов всего несколько:

  • * – любые элементы.
  • div – элементы с таким тегом.
  • #id – элемент с данным id .
  • .class – элементы с таким классом.
  • [name=»value»] – селекторы на атрибут (см. далее).
  • :visited – «псевдоклассы», остальные разные условия на элемент (см. далее).

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

  • .c1.c2 – элементы одновременно с двумя классами c1 и c2
  • a#id.c1.c2:visited – элемент a с данным id , классами c1 и c2 , и псевдоклассом visited

Отношения

В CSS3 предусмотрено четыре вида отношений между элементами.

Самые известные вы наверняка знаете:

  • div p – элементы p , являющиеся потомками div .
  • div > p – только непосредственные потомки

Есть и два более редких:

p – правые соседи: все p на том же уровне вложенности, которые идут после div .

  • div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).
  • HTML and CSS
    alignment in CSS

    so I am working on a project that is almost done, but I am trying to fix a problem that I have been having with
    . I have a

      for my aside, and I have a
        of some text (I only need a few bullet points). There is a constraint that ALL CSS must be external, which is the reason I don’t know how to fix it.

    The first Picture shows the entire page. http://i.imgur.com/wGLPYNg.png The last picture shows the that I am trying to move up and and align vertically without messing up the alignment of the text in the aside http://i.imgur.com/XsyMDgW.png

    Any help is greatly appreciated, and if more information is needed, I am happy to send more. Thanks in advance!!

    Осовы CSS

    2012-10-11 / Вр:22:33 / просмотров: 9600

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

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

    Давайте перейдем к основам CSS.
    CSS файл имеет расширение *.css. Часто веб-мастера присваивают CSS файлу имя style (style.css).
    CSS файл тесно связан с HTML. Другими словами, это можно объяснить так: CSS без HTML работать не будет.

    Предлагаю для общего понимания рассмотреть пример, как можно объединить HTML с CSS файлом.

    Во всех файлах html между тегами должно быть прописано следующее:

    style.css – это имя css файла. Здесь можно указать и путь к css файлу. Например css/style.css . Это означало бы, что в папке css содержится файл style.css .
    Как вы уже поняли, файл *.css может храниться вместе с файлами *.html, так и в отдельной папке.

    Смотрим пример и закрепляем все то, что я вам рассказал.

    Откройте стандартный блокнот Windows, Notepad++ или AkelPad. Скопируйте код снизу или перепишите его вручную.

    Сохраните как index.html
    Просмотр пошагового примера на картинках:

    Теперь в блокнотике Windows, Notepad++ или AkelPad создайте новый файл с такими данными

    Сохраните этот файл как style.css и сохраните так, чтобы файл style.css находился в одной директории или в папке с файлом index.html. Просмотр пошагового примера на картинках:

    Теперь всем файлам, где есть тег

    будет присвоен этот стиль, размер и цвет шрифта.

    • цвет шрифта # cc0000

    • размер шрифта = 35px

    Если у вас все получилось так, как у меня, можно усложнить задачу. В файле index.html пропишите следующее:

    В файле style.css пишем:

    Теперь всем файлам, где есть тег

    будет присвоен

    • цвет шрифта # ffffff

    • размер шрифта = 30px

    всем файлам, где есть тег будет присвоен

    • цвет шрифта # cccccc

    • размер шрифта = 19px

    Также всему сайту будет присвоена фоновая картинка fon.jpg.

    Разместите фоновую картинку fon.jpg вместе с остальными файлами
    index.html и style.css так, как на примере снизу:

    Вот я вам вкратце рассказал об основах css. Буду и дальше расписывать в своем блоге bloggood.ru о стилях css. Подписывайтесь на новости RSS и будьте в центре обновлений постов на блоге.

    С уважением блогер webmasterok2009.

    30 CSS селекторов, которые вы должны запомнить

    Russian (Pусский) translation by Dmitriy Troy (you can also view the original English article)

    Итак, вы изучили принцип наследования и основные селекторы: id и class — и думаете, что готовы к бою? Но, поверьте, вы очень многое упустили. Несмотря на то, что многие из описанных в этой статье селекторов являются частью спецификации CSS3, и поддерживаются только современными браузерами, вы просто обязаны их знать.

    Начнём с самого простого.

    Универсальный селектор соответствует любому элементу на странице. Часто разработчики используют его для обнуления свойств margin и padding . Это допустимо в тестовом режиме, но я не рекомендую использовать этот селектор в рабочих проектах. Он слишком нагружает браузер.

    Универсальный селектор * также можно использовать для стилизации всех потомков элемента.

    В данном примере стиль применится ко всем потомкам элемента #container div . Но, повторюсь, не стоит использовать эту технику слишком часто, а лучше вообще её не использовать.

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Использование символа решётки позволяет обратиться к уникальному идентификатору элемента id . Но старайтесь не злоупотреблять использованием идентификаторов.

    Спросите себя: мне действительно нужно использовать id для этого элемента?

    Идентификатор id должен быть уникальным и может использоваться на странице только один раз. При возможности старайтесь обходиться без идентификаторов. Старайтесь использовать тэги или псевдоклассы.

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    class — это селектор класса. Отличие селектора class от id в том, что класс не должен быть уникальным и может использоваться для выбора нескольких элементов на странице. Использование id позволяет выбрать конкретный уникальный элемент.

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    4. X Y


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

    Совет — Если ваш селектор выглядит так: X Y Z A B.error , то вы совершаете ошибку. Старайтесь избегать таких длинных вложений.

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Что вы будете делать, если вам понадобится выбрать только элементы определённого типа ? В этом случае вы не сможете использовать id или class . И вам на помощь придёт селектор по типу элемента. Если вам нужны все несортированные списки, просто используйте ul <> .

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Мы используем псевдокласс :link для стилизации ссылок, на которые пользователь ещё не нажимал.

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

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    7. X + Y

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

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    8. X > Y

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

    Селектор #container > ul выберет только тот элемент ul , который является прямым потомком элемента div с id равным container . Он не выберет, например, элемент ul , являющийся потомком первого элемента li .

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

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

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

    Y выберет все элементы p , расположенные после элемента ul .

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    10. X[title]

    Это селектор атрибутов. Он выберет только те ссылки, у которых имеется указанный атрибут title . Но что, если вам нужно что-то более конкретное? Что же.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    11. X[href=»foo»]

    Указанный выше код выберет все ссылки, указывающие на http://net.tutsplus.com. Они окрасятся в зелёный цвет. Стиль остальных ссылок останется без изменений.

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

    Этот метод отлично работает, но он слишком строгий. Что, если ссылка указывает на Nettuts+, но путь прописан как nettuts.com? В этом случае мы можем использовать синтаксис регулярных выражений.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    12. X[href*=»nettuts»]

    Вот то, что нам нужно. Звёздочка означает, что указанное значение должно быть частью указанного атрибута. Поэтому этот селектор выберет и nettuts.com, и net.tutsplus.com,, и даже tutsplus.com.

    Но помните, что этот способ слишком обширен. Что, если у вас будет ссылка, не указывающая на tuts+, но имеющая в адресе слово tuts? Для составления более строго правила используйте ^ и $ , указывающие на начало и конец строки соответственно.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    13. X[href^=»http»]

    Вам было интересно как на некоторых сайтах реализован показ иконки возле внешних ссылок? Уверен, вы встречали подобное. Иконка напоминает, что это внешняя ссылка, которая переведёт вас на другой сайт.

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

    Учтите, что мы не ищем http:// . В этом нет необходимости.

    А что, если мы хотим стилизовать все ссылки, указывающие, например, на фото? В этом случае нас интересует конец строки.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

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

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

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

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

    Как же нам выбрать все типы изображений, включая png , jpeg, jpg , gif ? Мы можем создать такой селектор:

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

    Теперь мы можем использовать селектор атрибутов для выбора только этих ссылок.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    16. X[foo

    Вот пример, который поразит ваших коллег. Этот трюк известен очень немногим. Символ тильда (

    ) позволяет выбрать атрибут, в котором есть значения, разделённые пробелом.

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

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

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    17. X:checked

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

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

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    18. X:after

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

    Многие впервые знакомятся с этими псевдоклассами при изучении хака clear-fix.

    Этот хак использует псевдокласс :after для добавления пробела после элемента. Обязательно занесите этот трюк в свою копилку знаний. Он особенно полезен там, где нельзя использовать overflow: hidden; .

    Ещё один интересный пример использования этих псевдоклассов: советы по созданию теней.

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

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

    • IE8+
    • Firefox
    • Chrome
    • Safari
    • Opera

    19. X:hover

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

    Помните, что старые версии Internet Explorer не распознают :hover , если он используется не на ссылках.

    Чаще всего вы будете использовать этот селектор для стилизации ссылок ( border-bottom ) при наведении кусора.

    Совет — border-bottom: 1px solid black; выглядит гораздо лучше чем text-decoration: underline; .

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

    • IE6+ (в IE6, :hover может применяться только к ссылкам)
    • Firefox
    • Chrome
    • Safari
    • Opera

    20. X:not(selector)

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

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

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

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    21. X::pseudoElement

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

    Псевдоэлемент отделяется символом ::

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

    Этот код найдёт все параграфы на странице и выберет из них только первые буквы.

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

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

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

    «Для совместимости с уже существующими стилями, браузеры поддерживают старый синтаксис написания псевдоэлементов, задекларированный в спецификациях CSS 1 и 2 ( :first-line, :first-letter, :before и :after). Но для новых псевдоэлементов такой синтаксис не поддерживается.» — Источник

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

    • IE6+
    • Firefox
    • Chrome
    • Safari
    • Opera

    22. X:nth-child(n)

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

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

    мы можем использовать этот псевдокласс для выбора нескольких элементов. Например, li:nth-child(4n) позволит нам выбрать каждый четвертый элемент списка.

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari

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

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

    Этот метод работает аналогично nth-child , Отличие в том, что отсчёт элементов ведётся с конца.

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

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

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

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

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari

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

    Да, как в предыдущих примерах, мы можем использовать nth-last-of-type для отсчёта элементов с конца.

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    26. X:first-child

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

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

    Многие дизайнеры используют классы first и last для устранения дублирующихся рамок. Но лучше использовать эти псевдоклассы.

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

    • IE7+
    • Firefox
    • Chrome
    • Safari
    • Opera

    27. X:last-child

    В отличие от first-child , last-child выберет последний дочерний элемент.

    Пример

    Давайте рассмотрим пример использования этих псевдоклассов. Создадим список.

    Markup

    Ничего особенного, просто список.

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

    Для добавления глубины списку используйте border-bottom для каждого элемента li на пару оттенков темнее, чем цвет фона. Далее добавьте border-top на пару оттенков светлее.

    Есть одна проблема: первый и последний элементы списка выглядят не очень. Давайте исправим это с помощью :first-child и :last-child .

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

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    Да, IE8 поддерживает :first-child , но не поддерживает :last-child .

    28. X:only-child

    Честно говоря, вряд ли вы будете использовать псеводкласс only-child очень часто. Но он существует, и знание о нём вам точно не повредит.

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

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

    В этом случае текст во втором элементе div останется без изменений. Только текст в первом div станет красным. Если у элемента более одного наследника, псевдокласс only-child не действует.

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

    • IE9+
    • Firefox
    • Chrome
    • Safari
    • Opera

    29. X:only-of-type

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

    Как мы можем решить эту задачу? Можно использовать ul li , но тогда мы выберем все элементы списка. Единственным решением будет использовать only-of-type .

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    30. X:first-of-type

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

    Для лучшего усвоения давайте пройдём тест. Скопируйте этот код в свой текстовый редактор:

    Теперь, не читая дальше, попробуйте выбрать только элемент «List Item 2». Читайте дальше после того, как решите задачу (или сдадитесь).

    Решение 1

    Есть несколько способов решения этой задачи. Начнём с использования first-of-type .

    Этот код говорит «найди первый несортированный список, затем найди его прямого наследника, который является элементом списка. Далее выбери второй элемент».

    Решение 2

    Другой способ — использование соседних селекторов.

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

    Решение 3

    С этими селекторами мы можем делать практически что угодно.

    Здесь мы выбираем первый список ul , затем находим первый элемент списка с конца! :)

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

    • IE9+
    • Firefox 3.5+
    • Chrome
    • Safari
    • Opera

    Заключение

    Если вам приходится поддерживать старые браузеры, такие как Internet Explorer 6, то будьте осторожны с использованием новых селекторов. Но пусть это не станет поводом отказаться от их изучения. Этим вы сослужите себе плохую службу. Следите за списком совместимости браузеров. Также вы можете использовать великолепный скрипт IE9.js, написанный Дином Эдвардом. Он добавляет поддержку новых селекторов в IE9.

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

    Спасибо за внимание, надеюсь вам пригодятся советы, описанные в этой статье!

    Селекторы в CSS

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

    Что такое CSS селекторы и каскадность?

    CSS селектор — это часть правила, с помощью которого можно выбирать элемент в HTML/XHTML/XML документе. Выбранный элемент можно оформить с помощью различных свойств (стилей) CSS.

    Для начала обусловимся:

    Под словом «селектор» подразумевается один CSS селектор: div , #content , :hover ;

  • Под словом «CSS правило» (далее просто «правило») подразумевается комбинация селекторов: #content .text p .
  • Приоритеты и каскадность

    Прежде чем разбирать селекторы, важно знать главный принцип CSS — каскадность (Cascading Style Sheets — каскадные таблицы стилей). Каскадность — это приоритет одних правил (стилей) над другими.

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

    внутри элемента .text получит стиль color:red; , а не color:blue; , потому что приоритет выше (111, а не 11).

    Если несколько css-правил с одинаковым весом влияют на один элемент, то элемент получит стили правила, которое ближе к концу HTML страницы (ниже в коде).

    Какой селектор какие баллы получает:

    Тип селектора Описание селектора Баллы
    \* универсальный селектор
    div тег 1
    :first-letter псевдо-элемент 1
    [атрибут=»значение»] селектор атрибута 10
    .text класс 10
    :hover псевдо-класс 10
    #content селектор по id 100
    style=»color:red;» атрибут style 1000
    !important добавка к значению 10000

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

    Приоритеты при медиа запросах

    Медиа запросы, например: @media ( max-width:500px ) < >не участвуют в подсчете приоритета и всегда должны располагаться ниже всех остальных правил, чтобы перебивать предыдущие, когда срабатывает указанное медиа условие.

    Неправильно: потому что так медиа запрос всегда имеет меньший приоритет и вообще не будет работать:

    Все селекторы CSS (коротко)

    Такие селекторы указываются в HTML документе (их можно увидеть в исходном коде страницы).

    Селектор Пример Описание
    * * Все элементы. Кроме псевдо-элементов.
    .class .myclass Элемент с .
    #id #main Элемент с .
    HTML тег span Элемент .
    [атрибут] [title] Элементы с атрибутом title .
    [атрибут = значение] [title=»cost»] Элементы с атрибутом title=»cost» .
    [атрибут

    = значение]

    [title

    =»cost»]

    Элементы с атрибутом title , в значение которого есть cost окруженное или нет пробелом ‘ «’: cost , cost foo , foo cost«
    [атрибут ^= значение] [src^=»http»] Элементы с атрибутом src , значение которого начинается с http .
    [атрибут $= значение] [src$=».png»] Элементы с атрибутом src , значение которого заканчивается на .png .
    [атрибут *= значение] [src*=»kama»] Элементы с атрибутом src , в значении которого присутствует ‘ kama ‘.

    есть еще селектор: [атрибут |= значение] . Пример: [lang |= ru] — элементы с атрибутом lang, значение которого равно ru или начинается с ru-, например «ru-RU». Но он практически не используется и его заменяет комбинация: [lang = ru], [lang ^= ru-] .

    Не указывается в разметке HTML-документа. Иногда динамичны — срабатывают при определенном условии (наведение курсора на элемент). Начинаются с двоеточия ‘ : ‘.

    Псевдо-класс Пример Описание
    :link a:link Выбор всех не посещенных ссылок.
    :visited a:visited Выбор всех посещенных ссылок.
    :active a:active Выбор активной ссылки.
    :hover a:hover Выбор ссылки при наведении курсора мышки. Вместо « может быть любой элемент
    По расположению на одном уровне
    :first-child *:first-child Любой первый элемент в блоке.
    :last-child *:last-child Любой последний элемент в блоке.
    :only-child *:only-child Любой элемент в блоке, если там всего один элемент.
    :nth-child(n)
    *:nth-child(2) Любой второй элемент в блоке.
    *:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
    *:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
    *:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
    Наглядно Посмотреть как это работает →
    :nth-last-child(n) *:nth-last-child(2) Любой второй элемент в блоке с конца.
    По расположению на одном уровне с тем же тегом
    :first-of-type p:first-of-type Выбор первого дочернего элемента

    .

    :last-of-type p:last-of-type Выбор последнего дочернего элемента

    .

    :only-of-type p:only-of-type Выбор дочернего элемента

    , если у родителя элемент

    всего один.

    :nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента

    .

    :nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента

    с конца.

    Поля форм
    :enabled input:enabled Выбор включенного . Обычно «:enabled« просто не пишется.
    :disabled input:disabled Выбор выключенного .
    :focus input:focus Выбор , который находится в фокусе (в который установлен курсор).
    :checked input:checked Выбранный элемент типа radio или checkbox.
    Остальные
    :root :root Выбор корневого элемента в документе.
    :empty p:empty Пустой элемент

    , в котором нет ни текста ни элементов.

    :lang(язык) p:lang(ru) Выбор элемента

    с атрибутом lang, значение которого начинается с «ru».

    :target :target Выбор активного элемента на странице, который имеет якорную ссылку.
    :not(селектор) :not(p) Выбор всех элементов, кроме

    .

    • Актуальную поддержку браузеров для CSS3 селекторов смотрите по этой ссылке.

    меню

    Элементы, которых реально не существуют в HTML документе. Начинаются с двойного двоеточия :: , но можно и с одинарного : .

    Псевдо-элемент Пример Описание Подд. / CSS
    ::first-letter p::first-letter Выбирает первую букву элемента

    .

    100% / 1
    ::first-line p::first-line Выбирает первую строку элемента

    .

    100% / 1
    ::before p::before Вставляет указанное в content:» содержимое в начало

    .

    100% / 2
    ::after p::after Вставляет указанное в content:» содержимое в конец

    .

    100% / 2
    ::selection p::selection Оформит выделенный (мышкой) текст внутри

    . Для firefox нужен префикс moz ( p::-moz-selection )

    71.41% / 3

    меню

    Для объединения селекторов, используются символы комбинаторы: , > , + ,

    , , . Они устанавливают взаимосвязь между селекторами.

    Комбинатор Пример Описание Подд. / CSS
    правило, правило div a, span i Элемент внутри

    и элемент внутри .

    100% / 1
    селекторСелектор .c1.c2 Элементы одновременно с двумя классами c1 и c2 . 100% / 1
    селектор селектор div span Элемент внутри
    .
    100% / 1
    селектор > селектор div > span Элементы , у которых родитель
    .
    100% / 2
    селектор + селектор div + p Один элемент

    , который находится сразу после

    p

    Все элементы

    , которые находятся сразу после

    Все селекторы CSS (подробно)

    Выбирает абсолютно все элементы на странице: «a, ul, li, div и т.д. Можно использовать для сброса стилей всех элементов. Например, такой код обнуляет внутренние и внешние отступы у всех элементов:

    * можно использовать в связке с другими селекторами. Например, сделаем так чтобы все дочерние элементы #container выделялись сплошной черной рамкой шириной 1px.

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

    Выбирает элемент у которого есть атрибут class с указанным значением: .

    Название класса, может состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса и подчеркивания (- _).

    Следующий код устанавливает красный цвет текста для всех элементов с классом error —

    У одного элемента может быть несколько классов (через пробел):

    Выбирает элемент у которого есть атрибут id с указанным значением: .

    Идентификатор может быть присвоен только одному элементу на странице (если присвоить несколько, то мир не рухнет, но так делать не принято).

    Идентификатор должен состоять из латинских букв (a-zA-Z), цифр (0-9), символа дефиса или подчеркивания: — _ . Начинается он только с буквы!

    Следующий код устанавливает ширину и отступ элемента с идентификатором:

    Селектор по ID имеет больший приоритет над селектором по классу (см. начало статьи). Поэтому по возможности получайте элемент по селектору класса, это считается правилом хорошего тона и позволит при необходимости без лишних усилий «перебить» стили.

    Селектор HTML тега. Применяться ко всем указанным элементам в документе. Часто используется для задания цвета, фона, шрифта и др.

    Следующий код задает цвет текста для всех ссылок и отступы для UL списков:

    CSS-правило, выбирает элемент Y, который является дочерним элемента X. Может состоять из нескольких селекторов (X Y Z). Сначала обязательно указывается родитель, а после него дочерние элементы. Их количество может быть любым. Свойства стиле будут применены только к последнему элементу.

    Например, следующий код выбирает любой элемент , являющийся потомком элемента

  • : (
  • текст ):

    Это правило можно сочетать с идентификаторами и классами: body.opera a < color:blue; >.

    a:link, a:visited, a:hover, a:active

    Селекторы псевдоклассов. Задает стиль ссылкам на странице документа в зависимости от их состояния. Псевдокласс :link – устанавливает цвет текста непосещенной ссылке, а псевдокласс :visited – стилизует уже посещенную ссылку. При наведении мыши (под курсором) — a:hover , и в момент нажатия — a:active .

    Все непосещенные ссылки будут красные, а посещенные фиолетовые, а при наведении станут зеленые, а при нажатии на ссылку голубые.

    Выбирает первый элемент Y, который находится после X (не вложен, а рядом). Стили будут применяться только к последнему элементу X.

    Например, следующий код устанавливает красный цвет текста в абзаце p, который расположен сразу после div :

    Выбирает все элементы Y, которые расположены после X на одном уровне. По поведению похож на X + Y. Разница в том, что будут выбраны все следующие элементы, а не только первый.

    Например, в указанном коде будут выбраны все элементы p , которые расположены после div :

    Окрасит «текст 2» и «текст 3»:

    Выбирает элементы Y, которые являются дочерними к X, но выбирается только первый уровень дочерних элементов.

    Добавит отступ для li первого уровня, т.е. тех который является прямым потомком элемента ul :

    Это правило не коснется

      .

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

    Например, следующий код меняет цвет ссылки при наличии в элементе a атрибута title :

    Окрасит только «текст»:

    Селектор атрибутов с точным значением. Выбирает элементы, у которых имеется атрибут с указанным значением.

    Например, следующий код меняет цвета ссылки на сайт «site.ru»:

    Окрасит только «текст»:

    Селектор атрибутов с плавающим значением. В следующем примере, символ «*» говорит селектору о том, что нужное значение может быть в любом месте атрибута href у тега a :

    Окрасит «текст» и «текст 2»:

    Для уточнения выбора можно использовать указатели » ^ » (в начале строки), » & » (в конце строки) или «

    » (точное значение через пробел). См. ниже.

    Это другое применение селектора атрибутов со плавающим значением (см. выше).

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

    А можно все это сократить до одного правила, но для этого у каждого элемента должен быть один и тот же атрибут: data-filetype=»image» . Например все ссылки в HTML имею этот атрибут:

    Тогда все ссылки на картинки можно выбрать так:

    Селектор атрибутов со значением в начале. Выбирает элемент, атрибут которого начинается с указанного значения.

    Следующий код показывает, как выбрать элементы а , ссылки в которых начинаются на « http »:

    Это css-правило установит фоновую картинку только для «текст»:

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

    Селектор атрибутов со значением в конце. «$» — означает конец строки.

    Например, выделим элементы, которые ссылаются на файлы определенного расширения. Следующий код выберет ссылки a , ссылающиеся на изображения формата .jpg :

    Окрасит только «текст»:

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

    Выбирает элемент у которого в значении атрибута foo есть bar . Он чем-то похож на *= , но если *= ищет указанную строку bar в любом месте значения атрибута, то

    = ищет указанную строку bar которая разделена пробелом. Т.е. bar может быть в начале, середине или конце, где бы он ни был он должен быть разделен пробелом от соседнего значения.

    Например такой css код:

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

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

    Селектор псевдоклассов. Стилизует включенные radio или checkbox. Обычно применяется для выделения текста. Может использоваться с input или option или просто без них: input:checked , option:checked или :checked .

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

    Селектор псевдоэлементов. Добавляет элемент в начало X (внутрь тега). Работает только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

    Когда-то все браузеры реализовали эти псевдоэлементы с одним двоеточием: :after/:before.
    Стандарт с тех пор изменился и сейчас все, кроме IE8, понимают также современную запись с двумя двоеточиями. А для IE8 нужно по-прежнему одно.

    Например с помощью таких стилей, можно указать значок для LI списка:

    Селектор псевдоэлементов. Добавляет элемент в конец X (внутрь тега). Работать только совместно со свойством content , которое указывает содержание добавленного элемента. content нужно указывать даже если содержание пустое ( content:» ), т.к. элемент должен хоть что-то содержать.

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

    Селектор псевдокласса. Срабатывает только при наведении мышки на элемент, когда курсор над элементом. Может применяться для любых элементов ( div, span ) не только ссылок .

    В следующем примере при наведении мышкой под ссылкой будет появляться черная линия толщиной 1px (замена свойству underline):

    А в следующем коде показано изменение цвета фона при наведении на элемент

    Селектор псевдокласса. Выбирает элементы, которые не содержат указанного селектора. Вместо «selector» может быть любой селектор, кроме псевдоэлементов ( :first-letter ). Двойное отрицание запрещено — :not(:not(. )) .

    Например, следующий код выбирает для стилизации все элементы, кроме элемента p :

    А в этом примере выбираются все элементы li , у которых нет класса .last :

    Выберет «элемент 1» и «элемент 2»:

    Селектор псевдоэлементов. ::first-line стилизует начальную строку.
    ::first-letter стилизует начальную букву. Изменяются только шрифт, цвет текста, фон, а также сильно привязан к множеству параметров: ширина окна браузера, язык, шрифт и т.п.

    С CSS 2.1, для различия, принято псевдоэлементы помечать двойным двоеточием «::», а псевдоклассы одинарным «:».

    Эти селекторы можно записывать с одним двоеточием :first-line , но двойное ::first-line предпочтительнее.

    В следующих примерах показано, как использовать указанные псевдоэлементы:

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

    Применит указанные стили для всех начальных букв всех абзацев в документе.

    #2 Выбираем первую строку в абзаце

    Применит указанные стили для всех начальных строк всех абзацев в документе.

    Выбирает каждый «n-ый» элемент Х, который находится на одном уровне с X. Считает все элементы на уровне X, т.е. любой тип, а не только тип X.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс или что-то еще.

    Особенность: есть такой же селектор :nth-of-type(n) разница между ними в том, что X:nth-child(n) считает все элементы на одном уровне, не важно какой тип указан в Х, а Х:nth-of-type(n) считает только элементы типа Х находящиеся на одном уровне. Например:

    • odd (нечетные),
    • even (четные),
    • число (порядковый номер с 1)
    • и выражение (an+b, a и b целые числа, n — счетчик от 0).
    • смотреть на примере >

    n — odd или even

    Раскрасим четные и нечетные параграфы в разные цвета:

    n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-child(2) указана только «а».

    :nth-child(odd) можно заменить на :nth-child(2n+1) — 1, 3, 5, 7 .

    :nth-child(even) можно заменить на :nth-child(2n) — 2, 4, 6, 8 .

    :nth-child(3n+4) — 4, 7, 10, 13 .

  • :first-child можно заменить на :nth-child(0n+1) или :nth-child(1)
  • Например: обратимся к каждому третьему элементу на текущем уровне, где расположены p:

    Выбирает начиная с конца. Работает точно также как и предыдущий :nth-child(n) только отсчет идет не сверху, а снизу.

    Также вместо n может быть:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 999).

    Например, следующий код установит красным цветом второй с конца параграф:

    Окрасит «Второй параграф.»:

    Еще примеры смотрите в предыдущем селекторе :nth-child(n) .

    Выбирает элемент по номеру указанному в «n». Начинает отсчет от первого элемента типа X находящегося на одном уровне.

    Под типом подразумевается именно тег элемента (div, span, li), а не его класс.

    Особенность: есть такой же селектор :nth-child(n) разница между ними в том, что X:nth-of-type(n) выберет только элементы типа Х находящиеся на одном уровне, а X:nth-child(n) считает все элементы всех типов на одном уровне, не важно какой тип указан в Х. Например:

    • odd — нечетные
    • even — четные
    • число — порядковый номер с 1
    • выражение an+b , где a и b целые числа, n — счетчик от 0 до 9999.

    #1 n — add или even

    Раскрасим четные и нечетные параграфы в разные цвета. Считает именно параграфы без h1, как это делает :nth-child :

    #2 n — число

    Установит красным цветом второй элемент:

    Окрасит «Второй параграф.»:

    #3 n — выражение

    Формула выражения: an + b , где «a» — число, которое будет умножаться на n, «n» — счетчик от 0-999, «b» — число, отступ.

    в селекторе :nth-of-type(2) указана только «а».

    :nth-of-type(odd) можно заменить на :nth-of-type(2n+1) — 2, 4, 6, 8 .

    :nth-of-type(even) можно заменить на :nth-of-type(2n) — 1, 3, 5, 7 .

    :nth-of-type(3n+4) — 4, 7, 10, 13 .

  • :first-of-type можно заменить на :nth-of-type(0n+1) или просто :nth-of-type(1)
  • Например: обратимся к каждому третьему элементу p на текущем уровне, где расположены p:

    Селектор псевдокласса. Выбирает элемент по номеру указанному в «n». Начинает отсчет от последнего элемента X находящегося на одном уровне.

    Это такой же селектор как и предыдущий :nth-of-type(n) только считает наоборот, с конца.

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

    Еще примеры смотрите в предыдущем селекторе :nth-of-type(n) .

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

    X:first-child это тоже самое что X:nth-child(1)

    #1 Пример: обратимся к первому элементу в блоке #container

    А вот так не выделит ничего:

    #2 Обнуление границы

    :first-child часто используется для обнуления свойства border на граничных элементах списка:

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

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

    X:last-child это тоже самое что X:nth-last-child(1)

    #1 Пример: обратимся к первому с конца элементу в блоке #container

    А вот так ничего не выделит:

    #2 Покрасим последний элемент li в списке ul в зеленый:

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

    X:first-of-type это тоже самое что X:nth-of-type(1)

    #1 Пример: обратимся к первому элементу div в блоке #container

    #2 Обнуление границы

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

    X:only-child (если один элемент в блоке)

    Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X. При подсчете элементов название тега X НЕ учитывается.

    Другими словами: выбирает дочерние элементы X только, когда у родителя количество всех дочерних элементов (неважно какой тип) равно 1.

    Например, выберем элемент, если он единственный в блоке:

    X:not(:only-child) (если больше чем один элемент в блоке)

    Чтобы выбрать все элементы блока, только в том случае, если в этом блоке всего больше чем один элемент, используем :only-child с отрицанием :not() :

    В результате если у нас один элемент он выбран не будет:

    А если больше одного, то будут выбраны все:

    X:only-of-type (если один элемент типа X в блоке)

    Селектор псевдокласса. Выбирает элемент X, который единственный на уровне X (не имеет соседей). При подсчете элементов название тега X учитывается.

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

    #1 Выберем ul только с одним элементом в списке.

    Другой вариант: можно ul > li:only-child , потому что обычно в списках ul находятся только li теги.

    #1 Сложное выделение

    У нас есть такой код:

    Как обратиться к «Список 2»?

    Решение 1

    Код находит первый список, затем находит его прямого наследника и у которого порядковый номер в списке равен 2.

    Решение 2

    Использование соседних селекторов.

    Браузер находит ul, следующий сразу за p, затем находит его последний дочерний элемент.

    Решение 3

    Это решение пожалуй самое правильное, потому что если между ul или li попадут другие теги, этот пример все равно будет выбирать нужный нам li:

    Браузер выбирает первый ul (именно ul), затем находит первый с конца элемент li (именно li).

    Наглядное пособие по селекторам типа :nth-child

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

    Считаем элементы в блоке с помощью nth-child

    Полезная статья на Хабре — количественные CSS селекторы, учит считать элементы с помощью nth-child . Например, нужно выделить первый элемент, только, если в блоке 6 элементов указанного типа. Или, нужно выделить все элементы блока, если в блоке всего 6 элементов.

    Диапазон элементов в селекторе

    Допустим, у вас есть список из 20 элементов и нужно выбрать элементы с 7 по 14 включительно. Это можно сделать вот так:

    Сброс стилей в CSS

    Спецификация CSS Cascading and Inheritance Level 3, недавно достигшая статуса CR (Candidate Recommendation), содержит два важных новшества.

    • Значение unset позволяет сбросить значение CSS-свойства. Для наследуемых свойств (например, font-size ) значение unset эквивалентно значению inherit , для ненаследуемых (например, background ) — initial .
    • Стенографическое свойство (!) all позволяет задать значение всем CSS-свойствам, поддерживаемым браузером, без необходимости их явного перечисления.

    Их совместное использование в виде объявления all: unset должно позволить легко и изящно достигать эффекта, для которого в настоящее время используются многострочные правила в рамках таблиц стилей класса «reset» (например, reset.css).

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

    Следует учитывать, что свойство display сбрасывается значениями unset и initial в состояние inline .

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

    Про виджеты согласен,
    но таблицы стилей класса «reset» ведь делаются *не* для того, чтобы сбросить стили в initial = исходные браузерные, а как раз задать какие-то свои, убрать какие-то различия исходных настроек стилей в разных браузерах. Ну и вообще переопределить дефолтные настройки на такие, от которых тебе удобнее «плясать»,
    к примеру такое правило:
    ol, ul <
    list-style: none;
    >
    (которое я, к слову, терпеть не могу и считаю полным бредом..;)).

    Иван, насколько я понимаю и насколько подтверждается текущей реализацией в Firefox Nightly, ни unset , ни initial не предназначены для сброса значений CSS-свойств в значение, имеющее место в таблице стилей по умолчанию в конкретном браузере. unset и initial призваны сбрасывать значения единообразно во всех браузерах.

    Например, все отступы ( margin , padding ) обнуляются, маркеры у списков удаляются, все фоны становятся прозрачными, блочные элементы становятся строчными и т. д.

    Единственное различие между unset и initial состоит в том, что initial сбрасывает значения наследуемых свойств (например, font-size ), унаследованные от родительских элементов, а unset — нет.

    Насколько удобным это будет на практике и как повлияет на подходы к вёрстке (предполагаю, что существенно), ещё предстоит узнать после выхода Firefox 27 и других реализаций этой интересной возможности.

    Перепечатка любых материалов сайта в любом объёме запрещена

    Илон Маск рекомендует:  Отладка javascript скриптов
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL