Обращение к значению кастомного атрибута CSS

@Interstellar · Регистрация: 26.05.2014

Author24 — интернет-сервис помощи студентам

Доброго дня.
Есть следующая конструкция:

HTML5

1
2
3

<section class="section" epub:type="subchapter">
  <h1 class="title">Заголовок</h1>
</section>

Мне нужно средствами CSS изменить color для содержимого H1, который находится только в section со значением атрибута epub:type="subchapter".
Пробовал вот такие варианты:

CSS

section[epub:type="subchapter"] h1.title {
   color: green;
}
 
section[epub\:type="subchapter"] h1.title {
   color: green;
}

Не работает, вне зависимости от наличия экранирования.
Каким образом можно обратиться к значению атрибута с символом двоеточия?

@whiteapps · 17.07.2015, 12:18

Interstellar,
https://jsfiddle.net/LwnwnLmf/
приведенный вами код с экранированием работает в

ie 9,10,11
ff 38
opera 12
opera 30
chrome 43

@Fedor92 · 17.07.2015, 12:43

Рабочий только второй вариант!

@whiteapps · 17.07.2015, 12:45

Fedor92,

Сообщение от whiteapps

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

не кричите
ни кто с вами не будет спорить

@Fedor92 · 17.07.2015, 12:46

Сообщение от whiteapps

не кричите

А кто кричал - я спокоен, как питон... Просто обратил внимание ТС...

@bigsun · 17.07.2015, 13:19

Не пиши имя класса, совпадающее с именем тэга html5. Нельзя так делать.
Далее, CSS3 не понимает что такое

Сообщение от Interstellar

epub:type

Если нужно очень точно применить стиль к конкретному тегу в конкретном месте. Выделяем именно тэг <section>, и именно с классом... пусть будет epubs, далее ищем только первый следующий, идущий непосредственно за тэгом <section> заголовок h1, и именно к нему применяем стиль.

Код

section.epubs + h1 {
color: green;
}

Либо проще. Говорим: найди среди всех тэгов section, первый дочерний h1, и ко всем таким h1 примени следующие стили:

Код

section h1:first-child {
color: green;

Вариант 2.
Введи data-id. вводи любое англ. слово (одно) без пробелов, можно с тире. Это один из допустимых "атрибутов пользователя".

Код

<section class="epub" data-id="....">

Далее, стиль CSS:

Код

section[data-id="...."] {
color: green;
}

= - слово точно соответствует ....
^= - начитается с ....
$= - заканчивается на ....
*= - где-то в слове имеется ....
И никаких пробелов не пиши.

Добавлено через 7 минут
Еще можно применить стиль непосредственно к h1 c классом .title. Вот так:

Код

.title {
color: green;
}

Если у тебя такой класс только в данной секции <section>, то сработает. Либо сработает ко всем таким h1, которые имеют класс .title, и независимо, где они находятся.

Добавлено через 2 минуты
Вернее так:

Код

section[data-id="...."] > h1 {
color: green;
}

@Interstellar · 17.07.2015, 14:43 **[ТС]**

Сообщение от whiteapps

https://jsfiddle.net/LwnwnLmf/
приведенный вами код с экранированием работает в
ie 9,10,11
ff 38
opera 12
opera 30
chrome 43

Действительно, в jsfiddle всё работает.
Но попробуйте запустить что-то вроде:

HTML5

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
    <head>
        <style type="text/css">
            body {
                background-color: #dcdcdc;
            }
            section[epub\:type="subchapter"] h1.title{
                font-family: 'Courier new';
                text-align: center;
                font-size: 70px;
                color: #009999;
            }
        </style>
    </head>
    <body>
        <section class="section" epub:type="subchapter">
            <h1 class="title">Hello, world!</h1>
        </section>
    </body>
</html>

И сохраните в .xhtml - работать не будет.

Это особенность проекта - используется xhtml (забыл указать в первом посте).

@Fedor92 · 17.07.2015, 15:54

Interstellar, да ладно...

Обращение к значению кастомного атрибута CSS

Ваш код из поста...

@Fourd · 17.07.2015, 16:01

Сообщение от Interstellar

И сохраните в .xhtml - работать не будет.

Сообщение от Fedor92

Interstellar, да ладно...

у меня не робит О.о

@Fedor92 · 17.07.2015, 16:04

Сообщение от Fourd

у меня не робит О.о

У меня комп сахарный...

Кушает любой код... Даже ie скушал...

@Interstellar · 17.07.2015, 16:08 **[ТС]**

Сообщение от Fedor92

да ладно...

На самом деле, это удивительно, что у вас работает данный код.
Вот тут автор описывает аналогичную проблему и указывает решение в замене epub:type на epub-type, т.к. пользовательские атрибуты с символом двоеточия из XML не работают в HTML/CSS.
К сожалению, для меня такое решение неприемлемо, поэтому буду строить костыли.

@Fedor92 · 17.07.2015, 16:17

Interstellar, ну к Вам только один вопрос: данный код использовали с доктайпом или без? Поскольку xmlns соответствует последней версии...

@Fourd · 17.07.2015, 16:26

Fedor92, у вас на скрине файл сохранен в html :S

Сообщение от Interstellar

.xhtml

Добавлено через 7 минут
вообщем валидацию не проходит на xhtml 1.1

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

DOCTYPE Override in effect!

The DOCTYPE Declaration for "XHTML 1.1" has been inserted at the start of the document, but even if no errors are shown below the document will not be Valid until you add the new DOCTYPE Declaration.

Info No Character encoding declared at document level

No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc.

See this tutorial on character encoding for techniques and explanations.

↑ TOP

Validation Output: 4 Errors

Error Line 14, Column 11: end tag for "head" which is not finished
</head>
✉
Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

Error Line 16, Column 24: there is no attribute "class"
<section class="section" epub:type="subchapter">
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Error Line 16, Column 44: there is no attribute "epub:type"
<section class="section" epub:type="subchapter">
✉
You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Error Line 16, Column 56: element "section" undefined
<section class="section" epub:type="subchapter">
✉
You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by:

incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element),
by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead).
by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case).

@Interstellar · 17.07.2015, 16:29 **[ТС]**

Сообщение от Fourd

вообщем валидацию не проходит на xhtml 1.1

Небольшой оффтоп вопрос от нуба

Как получить такой же лог валидации?

@Fourd · 17.07.2015, 16:40

валидатор >More Options >Document Type >XHTML 1.1 >Check

Добавлено через 1 минуту
на хтмлбук пишет, что тег section не поддерживается xhtml 1.0 1.1

Добавлено через 6 минут
заменить epub:type="subchapter" на класс нельзя?

@Fedor92 · 17.07.2015, 16:41

Fourd, не вижу параллели...

Вопрос к ТС, а почему Вы не используете класс или идентификатор для section?

@Fourd · 17.07.2015, 16:44

Не по теме:

Сообщение от Fedor92

Fourd, не вижу параллели...

уличная магия :wizard: , в чем тогда подвох ?

@Interstellar · 17.07.2015, 16:48 **[ТС]**

Сообщение от Fourd

заменить epub:type="subchapter" на класс нельзя?

Сообщение от Fedor92

Вопрос к ТС, а почему Вы не используете класс или идентификатор для section?

Содержимое XHTML страниц в моём проекте формируется трансформациями из чистого XML, затем стилизуется с помощью CSS. Так как я сам до конца в них (трансформациях) не разобрался, а время поджимает, то разумно поставить небольшой костыль с заметкой о необходимости исправления на будущее.

@Fedor92 · 17.07.2015, 16:57

Fourd, дело в том, что section годится для xhtml, но фишка в самом селекторе, как все уже поняли...

Можно указать свойства внутренним стилем и они будут применяться... Можно задать для section class="item" и через него задать свойства всем элементам внутри... Можно тупо убрать epub у type и тупо задать свойства... Надо немного покопать и я думаю можно будет найти рациональный способ для задания свойств через селектор атрибута - это лишь дело времени...

@Fourd · 17.07.2015, 17:27

Не по теме:

Fedor92, я не понял, пока не написали... мало опыта сказывается =(

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	17.07.2015, 12:18	2
	Interstellar, https://jsfiddle.net/LwnwnLmf/ приведенный вами код с экранированием работает в ie 9,10,11 ff 38 opera 12 opera 30 chrome 43 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 12:43	3
	Рабочий только второй вариант! 0

@whiteapps 413 / 378 / 220 Регистрация: 18.07.2014 Сообщений: 1,259
	17.07.2015, 12:45	4
	Fedor92, Сообщение от whiteapps код с экранированием работает не кричите ни кто с вами не будет спорить 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 12:46	5
	Сообщение от whiteapps не кричите А кто кричал - я спокоен, как питон... Просто обратил внимание ТС... 0

@bigsun 0 / 11 / 4 Регистрация: 12.07.2015 Сообщений: 92
	17.07.2015, 13:19	6
	Не пиши имя класса, совпадающее с именем тэга html5. Нельзя так делать. Далее, CSS3 не понимает что такое Сообщение от Interstellar epub:type Если нужно очень точно применить стиль к конкретному тегу в конкретном месте. Выделяем именно тэг <section>, и именно с классом... пусть будет epubs, далее ищем только первый следующий, идущий непосредственно за тэгом <section> заголовок h1, и именно к нему применяем стиль. Код section.epubs + h1 { color: green; } Либо проще. Говорим: найди среди всех тэгов section, первый дочерний h1, и ко всем таким h1 примени следующие стили: Код section h1:first-child { color: green; Вариант 2. Введи data-id. вводи любое англ. слово (одно) без пробелов, можно с тире. Это один из допустимых "атрибутов пользователя". Код <section class="epub" data-id="...."> Далее, стиль CSS: Код section[data-id="...."] { color: green; } = - слово точно соответствует .... ^= - начитается с .... $= - заканчивается на .... = - где-то в слове имеется .... И никаких пробелов не пиши. Добавлено через 7 минут* Еще можно применить стиль непосредственно к h1 c классом .title. Вот так: Код .title { color: green; } Если у тебя такой класс только в данной секции <section>, то сработает. Либо сработает ко всем таким h1, которые имеют класс .title, и независимо, где они находятся. Добавлено через 2 минуты Вернее так: Код section[data-id="...."] > h1 { color: green; } 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 15:54	8
	Interstellar, да ладно... Ваш код из поста... 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	17.07.2015, 16:01	9
	Сообщение от Interstellar И сохраните в .xhtml - работать не будет. Сообщение от Fedor92 Interstellar, да ладно... у меня не робит О.о 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 16:04	10
	Сообщение от Fourd у меня не робит О.о У меня комп сахарный... Кушает любой код... Даже ie скушал... 0

@Interstellar 1 / 3 / 1 Регистрация: 26.05.2014 Сообщений: 59
	17.07.2015, 16:08 [ТС]	11
	Сообщение от Fedor92 да ладно... На самом деле, это удивительно, что у вас работает данный код. Вот тут автор описывает аналогичную проблему и указывает решение в замене epub:type на epub-type, т.к. пользовательские атрибуты с символом двоеточия из XML не работают в HTML/CSS. К сожалению, для меня такое решение неприемлемо, поэтому буду строить костыли. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 16:17	12
	Interstellar, ну к Вам только один вопрос: данный код использовали с доктайпом или без? Поскольку xmlns соответствует последней версии... 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	17.07.2015, 16:26	13
	Fedor92, у вас на скрине файл сохранен в html :S Сообщение от Interstellar .xhtml Добавлено через 7 минут вообщем валидацию не проходит на xhtml 1.1 Кликните здесь для просмотра всего текста DOCTYPE Override in effect! The DOCTYPE Declaration for "XHTML 1.1" has been inserted at the start of the document, but even if no errors are shown below the document will not be Valid until you add the new DOCTYPE Declaration. Info No Character encoding declared at document level No character encoding information was found within the document, either in an HTML meta element or an XML declaration. It is often recommended to declare the character encoding in the document itself, especially if there is a chance that the document will be read from or saved to disk, CD, etc. See this tutorial on character encoding for techniques and explanations. ↑ TOP Validation Output: 4 Errors Error Line 14, Column 11: end tag for "head" which is not finished </head> ✉ Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p> Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on. Error Line 16, Column 24: there is no attribute "class" <section class="section" epub:type="subchapter"> ✉ You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead). This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash. Error Line 16, Column 44: there is no attribute "epub:type" <section class="section" epub:type="subchapter"> ✉ You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead). This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information. How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash. Error Line 16, Column 56: element "section" undefined <section class="section" epub:type="subchapter"> ✉ You have used the element named above in your document, but the document type you are using does not define an element of that name. This error is often caused by: incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Frameset" document type to get the "<frameset>" element), by using vendor proprietary extensions such as "<spacer>" or "<marquee>" (this is usually fixed by using CSS to achieve the desired effect instead). by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case). 1

@Interstellar 1 / 3 / 1 Регистрация: 26.05.2014 Сообщений: 59
	17.07.2015, 16:29 [ТС]	14
	Сообщение от Fourd вообщем валидацию не проходит на xhtml 1.1 Небольшой оффтоп вопрос от нуба Как получить такой же лог валидации? 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	17.07.2015, 16:40	15
	валидатор >More Options >Document Type >XHTML 1.1 >Check Добавлено через 1 минуту на хтмлбук пишет, что тег section не поддерживается xhtml 1.0 1.1 Добавлено через 6 минут заменить epub:type="subchapter" на класс нельзя? 1

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 16:41	16
	Fourd, не вижу параллели... Вопрос к ТС, а почему Вы не используете класс или идентификатор для section? 0

@Fourd
	17.07.2015, 16:44 #17
	Не по теме: Сообщение от Fedor92 Fourd, не вижу параллели... уличная магия :wizard: , в чем тогда подвох ? 0

@Interstellar 1 / 3 / 1 Регистрация: 26.05.2014 Сообщений: 59
	17.07.2015, 16:48 [ТС]	18
	Сообщение от Fourd заменить epub:type="subchapter" на класс нельзя? Сообщение от Fedor92 Вопрос к ТС, а почему Вы не используете класс или идентификатор для section? Содержимое XHTML страниц в моём проекте формируется трансформациями из чистого XML, затем стилизуется с помощью CSS. Так как я сам до конца в них (трансформациях) не разобрался, а время поджимает, то разумно поставить небольшой костыль с заметкой о необходимости исправления на будущее. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	17.07.2015, 16:57	19
	Fourd, дело в том, что section годится для xhtml, но фишка в самом селекторе, как все уже поняли... Можно указать свойства внутренним стилем и они будут применяться... Можно задать для section class="item" и через него задать свойства всем элементам внутри... Можно тупо убрать epub у type и тупо задать свойства... Надо немного покопать и я думаю можно будет найти рациональный способ для задания свойств через селектор атрибута - это лишь дело времени... 0

@Fourd
	17.07.2015, 17:27 Обращение к значению кастомного атрибута CSS #20
	Не по теме: Fedor92, я не понял, пока не написали... мало опыта сказывается =( 0