Is it possible to have pseudo-classes using inline styles?
Example:
Google
I know the above HTML won't work but is there something similar that will?
P.S. I know I should use an external style sheet, and I do. I was just curious if this could be done using inline styles.
No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:
The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:
declaration-list
: S* declaration? [ ';' S* declaration? ]*
;
Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.
Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).
Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.
Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.
Not CSS, but inline:
<a href="#"
onmouseover = "this.style.textDecoration = 'none'"
onmouseout = "this.style.textDecoration = 'underline'">Hello</a>
See example →
Rather than needing inline you could use Internal CSS
Google
You could have:
Google
<style>
#gLink:hover {
text-decoration: none;
}
</style>
You could try https://hacss.io:
Google
Demo
Related
In all modern browsers, CSS rules declared with the !important keyword take precedence over all other declarations, even including those made inside the element style attribute.
Where in the CSS spec does it say it should override element style attribute rules? I am trying to find it here but am not having any luck:
https://www.w3.org/TR/css-cascade-5/#importance
I really don't like that it overrides element styles, and am wondering if this behavior was even in the specs to begin with.
Section 6.1, above the link you give. Origin and Importance comes before Element-Attached Styles
Right at the top of the section on the cascade sort
The cascade sorts declarations according to the following criteria, in descending order of priority:
The very first entry is:
Origin and Importance
which includes all the !important rules.
The third entry is:
Element-Attached Styles
This behavior is described with the sentence:
An important declaration takes precedence over a normal declaration.
(emphasis mine)
Where an important declaration has !important at the end and:
All other declarations are normal (non-important).
Source: https://www.w3.org/TR/css-cascade-5/#importance
If you don't like that important styles have this trait, then don't use them—find a way to override non-inline styles using the other precedence rules. Generally, I would recommend using important styles only when truly necessary (e.g. to override a style that is defined inline by a third party).
I have constructed a mock-up of a hierarchical menu system, where the main menu (#moduleMenu1) has a sub-menu (#moduleMenu2), and they both share a CSS class. When I use ID selectors on the menus, all is well (http://jsfiddle.net/stamminator/pwnuymd2/1). However, when I switch to using a class selector, which would be much more elegant (especially if I add a third hierarchy to the menus), the selectors are being overwritten (http://jsfiddle.net/stamminator/pwnuymd2/).
I suppose I can use !important on every property in my styles, but assuming I'll need to have a page which overwrites those styles on an as-needed basis at some point, this isn't a great solution either. Is there a third option besides id selectors or !important that is available?
I'm not sure if this is related, but I've noticed a second problem as well. When I have the HTML files open locally and do a selector in Chrome's JavaScript console on their shared class, I would expect to get back both elements. Instead, I only get back one.
//what I typed into the console:
$(".moduleMenu");
//my result:
<div id="moduleMenu1" class="moduleMenu">
<div>
Proposal
Browse
Financial
Documents
</div>
</div>
//where's #moduleMenu2? They both have the same CSS class
Here is a link so you can download the files and run it in your own debugger if you'd like: https://onedrive.live.com/redir?resid=9F7FCE5CCA52BABF!33812&authkey=!ANi0Ivf0BbmVbGk&ithint=file%2czip.
The JavaScript console issue is a non-issue I suppose, but I figured I'd mention it in case it's related. Any help I can get in getting my CSS working properly would be much appreciated!
ID selectors are of higher importance than class selectors. You should almost never use IDs in CSS. Change your ID selectors to class selectors (even if they're unique) and be happy.
<div id="moduleMenu1" class="moduleMenu moduleMenu1">
Demo
Of course, some of your listed selectors can now be combined.
Demo 2
As mentioned by isherwood, ID selectors take priority over class selectors. This is due to CSS specificity, which is the way CSS determines which rules are applied to an element.
The simplest way to explain CSS specificity is:
!important > inline > ID > class > element > universal & inherited
For a slightly more in-depth explanation, CSS specificity is stored as four separate integers. When no styles are applied to an element (or only universal and inherited rules are applied), the values for that element are 0,0,0,0.
The first value represents inline styles
The second value represents ID style rules
The third value represents class or attribute style rules
The fourth value represents tag style rules
1,0,0,0 overrides 0,1,0,0: an inline style will always override an ID style rule. Likewise, an ID will always override a class. However, 0,1,1,0 overrides 0,1,0,0, so a class and an ID in a rule will override the ID rule.
With the exception of some older browsers that roll over values after 255, there is no number of classes that can override an ID: the only way to override an ID style rule is with an ID, inline styles, or the !important flag.
Is it possible to have pseudo-classes using inline styles?
Example:
Google
I know the above HTML won't work but is there something similar that will?
P.S. I know I should use an external style sheet, and I do. I was just curious if this could be done using inline styles.
No, this is not possible. In documents that make use of CSS, an inline style attribute can only contain property declarations; the same set of statements that appears in each ruleset in a stylesheet. From the Style Attributes spec:
The value of the style attribute must match the syntax of the contents of a CSS declaration block (excluding the delimiting braces), whose formal grammar is given below in the terms and conventions of the CSS core grammar:
declaration-list
: S* declaration? [ ';' S* declaration? ]*
;
Neither selectors (including pseudo-elements), nor at-rules, nor any other CSS construct are allowed.
Think of inline styles as the styles applied to some anonymous super-specific ID selector: those styles only apply to that one very element with the style attribute. (They take precedence over an ID selector in a stylesheet too, if that element has that ID.) Technically it doesn't work like that; this is just to help you understand why the attribute doesn't support pseudo-class or pseudo-element styles (it has more to do with how pseudo-classes and pseudo-elements provide abstractions of the document tree that can't be expressed in the document language).
Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade (!important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.
Note also that very old revisions of the Style Attributes spec did originally propose allowing this, however it was scrapped, presumably for the reason given above, or because implementing it was not a viable option.
Not CSS, but inline:
<a href="#"
onmouseover = "this.style.textDecoration = 'none'"
onmouseout = "this.style.textDecoration = 'underline'">Hello</a>
See example →
Rather than needing inline you could use Internal CSS
Google
You could have:
Google
<style>
#gLink:hover {
text-decoration: none;
}
</style>
You could try https://hacss.io:
Google
Demo
I'm currently working on making an accessible site using, among other things, ARIA tags. It occurred to me that attributes such as aria-invalid would be good selectors for my CSS to target, rather than using a .error class.
The benefit of this is leaner, more meaningful HTML, which is easier for me to hook into from CSS (and JS). That said, I haven't seen this done elsewhere so I'm suspicious there are downsides to leveraging accessibility tags for styling. I suspect the use of unconstrained attribute selectors makes for less performant CSS, but are there other downsides I haven't considered?
Attribute selectors are a very flexible way to manage styles for large-scale CSS because the attribute selectors will always have a specificity of 0-0-1-0.
[aria-*] selectors are perfectly fine to use as styling hooks, and I also recommend using custom [data-*] attributes to fill in the gaps where you might need a one-off. Certainly class selectors should continue to be used, however you can do some very elegant style extensions with attribute selectors:
[data-foo] {
color: red;
}
[data-foo="bar"] {
color: blue;
}
[data-foo="fizz"] {
color: green;
}
Each of these selectors has the same specificity, and the cascade will allow the styles to be applied appropriately.
You could create your own form of classes by using the [attr~="value"] selector if need be.
Using the "attribute contains" selector can be useful for a technique that I call "classy images"
One of the hidden benefits to using attributes over classes is a performance gain in JavaScript. Instead of having to check for the presence of a class on an element (which is remarkably easy to get wrong), browsers have supported getAttribute, hasAttribute, and setAttribute for a long time.
You need to understand that attributes like aria-invalid should be avoided in the first place. You should always use native semantics if available (e.g. required on input elements). This is called the first rule of ARIA.
I think what you really want is to add styling to computed ARIA states and properties. Unfortunately this is not supported in CSS at the moment.
In summary: There is nothing wrong with using [aria-invalid] as a CSS-selector. It will just not help you much because you should avoid that attribute in the first place.
I want to know what things can be done "ONLY" with CSS , that are not available using dynamically updated style "attributes" using Javascript. So far I know:
Media queries
Pseudo tags
Any more?
Update:
This question was closed but I asked it as I am trying to decide on the technology to use for a project, but one of the options cannot use CSS style sheets, and can only manipulate the style attribute using javascript.
Inline style attributes can only contain property declarations (e.g. width: 10px or color: red). They can't contain any other CSS constructs: not selectors, at-rules (e.g. #import, #media, #font-face), etc. Just property declarations.
However, they play a big role in the cascade: any styles for an element with that attribute take highest precedence (after considering !important of course).
There's actually an entire module devoted to style attributes, by the way, but it's not essential reading for authors.
So, anything that isn't a CSS declaration, is only possible in a stylesheet, not a style attribute. Not sure if that's what you're asking...
Note that media queries and #media rules are not the same thing; media queries can exist in areas outside of stylesheets too, like HTML's media attribute, where they're next most commonly found.
I believe pseudo classes (:hover etc..) and pseudo elements (:after, :before) cannot be added/manipulated via JS (via the style property i mean) because they are not part of the DOM.