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.
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.
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
1) If inside CSS file we specify the following style:
td
{ text-align:center; }
While in a Html file we have
<td align=”right” … >
then value set in CSS file will take precedence over an inline html attribute and thus elements contained inside <td> cell will be aligned to the center.
a) Is same true for all html attributes? Meaning if a CSS rule and an html attribute functionalities overlap , will the CSS rule always take precedence?
BTW – I know we should usually prefer using CSS rules vs html attributes
thanx
Which set of definitions, HTML attributes or CSS properties, take precedence?
The textbook answer:
CSS properties take precedence over HTML attributes. If both are specified, HTML attributes will be displayed in browsers without CSS support but won't have any effect in browsers with CSS support.
(Reference: http://www.hwg.org/resources/faqs/cssFAQ.html)
The real-world answer:
It depends, if you want to be certain for a specific attribute or set of attributes, you will have to create a unit test and apply those tests to the specific browser(s) that you want to verify for compliance with the "textbook" answer, or compliance to your specification for the specific project you are working on.
You already imply that you know certain HTML attributes are deprecated, so I will not belabor that point here.