{"id":55831,"date":"2022-05-18T03:01:00","date_gmt":"2022-05-17T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55831"},"modified":"2022-05-18T11:01:08","modified_gmt":"2022-05-18T01:01:08","slug":"html-attribute-css-pseudo-class-styling-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-attribute-css-pseudo-class-styling-tutorial\/","title":{"rendered":"HTML Attribute CSS Pseudo Class Styling Tutorial"},"content":{"rendered":"
\"HTML<\/a>

HTML Attribute CSS Pseudo Class Styling Tutorial<\/p><\/div>\n

Around here with the wording of our blog posts we try to get it right when differentiating an HTML “attribute” as distinct from a CSS “property”. Over time, the best explanation we can give for HTML attribute is that it is the word before<\/font> “=” with the outerHTML view of an HTML element …<\/p>\n


\n<select style<\/font>='width:420px;' onchange<\/font>=\"jsway(this);\" size<\/font>=8>
\n<option data-capital<\/font>='Canberra' data-area<\/font>='2,358' data-population<\/font>='430,469' data-value<\/font>='8' value<\/font>='7'>Australian Capital Territory<\/option>
\n<option data-capital<\/font>='Sydney' data-area<\/font>='809,952' data-population<\/font>='8,186,789' data-value<\/font>='5' value<\/font>='1'>New South Wales<\/option>
\n<option data-capital<\/font>='Darwin' data-area<\/font>='1,419,630' data-population<\/font>='245,865' data-value<\/font>='3' value<\/font>='8'>Northern Territory<\/option>
\n<option data-capital<\/font>='Brisbane' data-area<\/font>='1,851,736' data-population<\/font>='5,240,520' data-value<\/font>='2' value<\/font>='3'>Queensland<\/option>
\n<option data-capital<\/font>='Adelaide' data-area<\/font>='1,044,353' data-population<\/font>='1,772,787' data-value<\/font>='4' value<\/font>='5'>South Australia<\/option>
\n<option data-capital<\/font>='Hobart' data-area<\/font>='90,758' data-population<\/font>='540,839' data-value<\/font>='7' value<\/font>='6'>Tasmania<\/option>
\n<option data-capital<\/font>='Melbourne' data-area<\/font>='237,657' data-population<\/font>='6,643,062' data-value<\/font>='6' value<\/font>='2'>Victoria<\/option>
\n<option data-capital<\/font>='Perth' data-area<\/font>='2,642,753' data-population<\/font>='2,685,165' data-value<\/font>='1' value<\/font>='4'>Western Australia<\/option>
\n<\/select>
\n<\/code><\/p>\n

… with those “data-” prefixed ones sometimes referred to as global data attributes<\/a>, and in the early days we were tempted to describe this as a “property”, but no, “property” is more a CSS tha<\/strike>ing, as per them being the word before<\/font> “:” …<\/p>\n


\n<style>
\noption:hover::before<\/font> {
\n content<\/font>: ' (Population Order ' attr(value<\/font>) ': ' attr(data-population<\/font>) ') '; font-size<\/font>: .7em;
\n}
\noption:active::after<\/font> {
\n content<\/font>: ' (Area Order ' attr(data-value<\/font>) ': ' attr(data-area<\/font>) ' km\\0000B2 ) '; font-size<\/font>: .7em;
\n}
\n<\/style>
\n<\/code><\/p>\n

… while CSS Pseudo-classes<\/a> highlighted in red above also exist after “:” but in the selector CSS parts<\/font> …<\/p>\n

\nA pseudo-class is used to define a special state of an element.
\n
\nFor example, it can be used to:
\n
\nStyle an element when a user mouses over it
\nStyle visited and unvisited links differently
\nStyle an element when it gets focus\n<\/p><\/blockquote>\n

Can these woooooooorrrrrrlllllldddds meet? We think so, and thanks to <data>: The Data element – HTML: HyperText Markup Language | MDN<\/a> for help here. Within the “value” part of a CSS “property” you can define, via the CSS attr()<\/a> function …<\/p>\n

\nThe attr() CSS function is used to retrieve the value of an attribute of the selected element and use it in the stylesheet. It can also be used on pseudo-elements, in which case the value of the attribute on the pseudo-element’s originating element is returned.\n<\/p><\/blockquote>\n

… where what you put within the rounded brackets of your attr() definition can correspond to an HTML element “attribute”<\/font> and, thereby, the “value” of that HTML “attribute” gets plonked<\/i> there, usefully, in an XML feeling way that elements can contain “attribute” data of use.<\/p>\n

Well, by now, we’ve written out a lot of our “proof of concept” css_attr_value.html<\/a> web application<\/a> that you can try below …<\/p>\n