Классы

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

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

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        АлмазАметистСапфир
Название
Цвет
Твердость по Моосу
 
 
Белый
10
 
 
Рубин
Красный
9
 
 
Голубой
7
 
 
Изумруд
Зеленый
8
 
 
Голубой
9
 
 
  

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

В примере 8.4 показано использование разных классов для создания облака тегов.

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент 
  

Результат данного примера показан на рис. 8.4.

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

Вопросы для проверки

1. Какое имя класса написано правильно?

2. Какой цвет будет у слова «потока» в коде?

При использовании следующего стиля?

4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Источник

Selecting HTML5 id and class names that start with a number in CSS

Since HTML5 it’s been valid to start an HTML element ID with a number. For example . From an HTML perspective, that’s fine.

However that doesn’t mean that CSS is happy to have an ID selector starting with a number. For example, this will not work:

That’s because even though HTML5 is quite happy for an ID to start with a number, CSS is not. CSS simply doesn’t allow selectors to begin with a number. The relevant part of the specification states:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

W3C Specification

However, you can easily work around this by using an attribute selector:

However, another possibility is to use a unicode character instead of a number. For example, instead of the attribute selector, you could do this:

However, that seems more difficult to me than the attribute selector, I’d always been to look up what the correct unicode character was. Other devs looking at those selectors might also wonder what on earth they are.

If going the attribute selector route, be aware that it only works down to IE7. If you need to support older browsers than that you have my sympathies (you can still use the unicode selectors).

The same number and selector rules apply with class names. You can write a class starting with a number in HTML but to get the selector to work in CSS you either need to use the attribute selector or escape it with unicode. To exemplify the prior example with a class instead:

If you enjoyed this post and/or it was useful, Say thanks with a coffee. 🙏

Learn to use CSS effectively, ‘Enduring CSS‘ is out now

Write and maintain large scale modular CSS and embrace modern tooling including PostCSS, Stylelint and Gulp

9 comments:

Ben, is this still the case today (4/27/2014)? I’ve been looking around the web and although I see that the W3C says that it’s fine to start an ID with a digit, (http://www.w3.org/html/wg/drafts/html/master/dom.html#the-id-attribute) it doesn’t specify anything about classes starting with a digit/number. Also, as you can see in this fiddle (http://jsfiddle.net/hrgg2/) both ID and Class that start with a digit don’t get styled, only the ones with a ‘word’. Thanks.

Hi Ricardo, Yes, all still holds true. I’ve just updated the post a little with some additional information on what the specifications say about CSS selectors.

Yes, I read the CSS spec and figured out that HTML5 spec says one thing and CSS spec another. The reason I asked is because I found about skelJS (http://skeljs.org/) and I noticed that they’re using “4u” or “8u” class names and that took me back for a second. Very unusual to see something like that out there. Thanks for the info and update Ben.

Hi Ben can you help with this problem:
I have a php variable called $userid which is numerical – i want my css to change colour based on the value of $userid
So if my userid = 621
a.\36 21
This works perfectly In my php page i have tried
echo ‘ a.\3’. $userid . ‘ ‘;
This doesn’t work – I don’t know how i would write it correctly either – can you help?

Hi Huw, could you use the attribute method to create the selector instead? Might prove more straightforward?

var str1 = “Javascript”;
var str2 = “don’t mind” ; document.getElementById(“1”).innerHTML = str1 + “” + str2;
document.getElementById(“2”).innerHTML = “Yeah, it’s true”;

What about querySelector() and querySelectorAll() ?
I’ve experienced trouble when using number characters, or as the first character in selectors etc.

Leave a Reply Cancel reply

My second book – Sass and Compass for designers

I’d like to tell you about my second book, ‘Sass and Compass for designers’. Update: 25th April 2013 — the book is now available from Packt in ebook formats and….

Working with lists and @each loops in Sass with the index and nth function

In Chapter 8 of Sass and Compass for Designers the process of creating loops with an @each loop is covered. Part of the chapter deals with how to index a….

Books

Learn to build modern, responsive web sites with the latest features of CSS and HTML. All new 4th Edition!

Understand how to scale and architect CSS, making CSS behave predictably in any scenario

Video Courses

Over 3 hours covering all the incredible power of Sublime Text

Give your web animations super-powers by mastering the JavaScript Web Animations API

Источник

Есть ли причина, почему CSS не поддерживает идентификаторы и классы, начиная с цифр?

Я заметил, что свойства css не применяются, если id или class начинается с числа. Например, ни одно из следующих действий не будет работать:

Почему CSS не поддерживает идентификаторы или имена классов, начиная с цифр? (Javascript, например, работает с числовыми идентификаторами и классами)

Фактически в спецификации указано, что классы, начинающиеся с числа, будут интерпретироваться как измерение [1]:

CSS2 анализирует число, за которым сразу следует идентификатор в качестве маркера DIMENSION (т.е. неизвестный блок), CSS1 анализировал его как число и идентификатор. Это означает, что в CSS1 была указана правильная формулировка “font: 10pt/1.2serif”, а также “font: 10pt/12pt serif”; в CSS2 перед “serif” требуется пространство. (Некоторые UA приняли первый пример, но не второй).

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

В CSS1 имя класса может начинаться с цифры ( “.55ft” ), если только это не измерение ( “.55in” ). В CSS2 такие классы анализируются как неизвестные измерения (, чтобы допускать последующие добавления новых единиц). Чтобы сделать допустимый класс “.55ft”, для CSS2 требуется, чтобы первая цифра была экранирована ( “.\35 5ft” )

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

Идентификаторы и классы должны быть действительными идентификаторами.

Идентификаторы перечислены в спецификации :

Итак, необязательный знак — , за которым следует nmstart , за которым следует любое число nmchar s.

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

nonascii [\240-\377] escape |\\[^\r\n\f0-9a-f] unicode \\(\r\n|[ \t\r\n\f])? 

Хорошо, поэтому с учетом всего этого заметите, что nmstart содержит не 0-9 или — . Это означает, что идентификаторы и классы не могут начинаться с числа в соответствии со спецификацией CSS. Фактически, они не могут даже начинаться с -1 . Или два дефиса.

Вот почему они не распознаются в вашем коде.

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

В CSS идентификаторы (включая имена элементов, классы и идентификаторы в селекторах) могут содержат только символы [a-zA-Z0-9] и символы ISO 10646 U + 00A0 и выше, плюс дефис (-) и подчеркивание (_); они не могут начинаться с цифры, два дефиса или дефис, за которым следует цифра.

Согласно HTML5.1 Ночью с 5 октября 2014 года, они согласны с тем, что нет причин, по которым идентификатор не сможет начните с числа:

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

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

Вы можете добиться этого с помощью CSS, но по-разному

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

Его можно зафиксировать как:

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

В прошлом языки, такие как FORTRAN и BASIC, не требовали использования пробелов, так что примерно так:

Проблема в том, что такие вещи очень трудно понять:

Как это можно было бы интерпретировать как:

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

Я не думаю, что есть конкретная причина CSS. Это старый стандарт для языков программирования. Языковые токенизаторы могут быть быстрее/проще, если первый символ может определить, что весь токен – это число или идентификатор (токен, которому предшествует числовой символ, должен быть числовым литералом).

var x = 10e4; // is this a variable? 

Источник