I've stumbled across some odd behavior in IE 10 and 11. The adjacent sibling CSS combinator works. (+) The :valid and :invalid pseudo classes work. But when you put them together, they get weird.
Take this html
<input required>
<p class="message">message</p>
styled with this css
input:valid { border: solid green 1px; }
input:invalid { border: solid red 1px; }
input:valid + .message { background-color: green; }
input:invalid + .message { background-color: red; }
When there is no text in the input, it correctly has a red border. The color of the following message should always match. However, you have to perform a page zoom to get the colors to synchronize. Note that merely resizing the viewport is not enough. Is this a bug? Is there a workaround?
Here's a demo.
As BoltClock said in its comment, it's a repaint bug.
You can force a repainting by toggling the display css to none and back to block in the .message element.
Example:
$('input').keyup(function () {
$(this).siblings('.message').css('display','none').css('display', '');
});
Related
Is the weight of first-line greater than that of first-of-type? I'm a little confused!
p::first-line {
color: green;
}
p:first-of-type {
color: blue;
}
h1:last-of-type {
color: red;
}
<div>
<p>p1contentp1contentp1contentp1contentp1<br>contentp1contentp1contentp1content</p>
<h1>h1hahaha</h1>
<h1>h1hahaha2</h1>
<p>p2content</p>
</div>
In my opinion, the first p-text should be completely blue.
::first-line is a pseudo element, which means that it behaves as if it is an element inside its parent, the p.
So CSS properties defined on the p don't even apply to the ::first-line, unless they are inherited.
In this case, the color property does inherit, but it is simply overridden by the color of the pseudo element.
I have always wonder why this wouldn't work as it would make so much sense.
CSS:
#button1:hover {
background: green;
#button2 {
background: red;
}
}
HTML
<button id="button1"></button>
<button id="button2"></button>
If I hover over Button1, Button2's background should also change.
Is there a workaround to this other than the use of Javascript?
You can use the adjacent selector,
#button1:hover {
Background: green;
}
#button1:hover + #button2 {
Background: red;
}
Have a look at all the css selectors: http://css-tricks.com/almanac/
Oh by the way it's only possible to apply css on hover to elements after the hovered element. Parent elements and elements before the hovered element cannot be styled with css on hover. It's a limitation of css.
This can be done but CSS lacks the ability to provide powerful conditional statements. However if you look into SASS CSS LESS it is starting to happen.
What color will my input be when it is focused AND hovered?
input:hover {
color: red;
}
input:focus {
color: blue;
}
These are presumably in the same stylesheet and they have the same specificity (one pseudo-class and one element), so the only remaining step in the cascade order is order specified. That is to say that if it is hovered and focused, it will be blue.
On Specificity: http://www.w3.org/TR/CSS2/cascade.html#specificity
input:hover {
color: red;
}
input:focus {
color: blue;
}
In the demo, because the input is focused and the CSS has :focus listed last, the input will be blue.
If you reverse those two rule sets, the input will be red, because :hover is last.
Try input:focus:hover
Normaly we just have 3 states, active, hover and focus. What you want wont be possible, but try the code above.
Why the following code results in red color rather than black ?
HTML:
<div class="error classA" att="A"></div>
CSS:
div {
width: 100px;
height: 100px;
}
[att=A].classA {
background-color: red;
}
.error {
background-color: black;
}
If I remove [att=A], it becomes black, as expected. Why is that ?
It's because of CSS Specificity. The 'red' rule is more specific (elements which have this attribute AND this class) than the 'black' rule (elements which have this class). When you remove the [att=A], they have the same specificity, but because the black rule is later in the file, it wins.
Because in CSS, specificity counts towards the "Cascade" too.
[att=A].classA targets an attribute and a class name.
.error only targets a class name
Because the first is more specific, it gets applied over top of the second.
If you want to forcefully override a previously applied style, you can use the !important declaration:
[att=A].classA {
background-color: red !important;
}
However, I should note, IE ignores the !important declarationhas buggy support for it, so use it with care.
The most specific selector wins, and [att=A].classA is more specific than .error. Without it, the last one declared in the CSS wins, for example:
.error {
background-color: black;
}
.classA {
background-color: red;
}
Would also result in red.
Ref: Forms, Post and submit buttons
Following on from my last question, I've attempted to style my input tags.
I tried
.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
but read somewhere that you're not meant to select elements in this fashion for pseudo-classes so I tried:
input.as_link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:link {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:visited {
background: transparent;
border: none;
cursor: pointer;
padding: 0px;
}
input.as_link:hover {
text-decoration: underline;
background: #F4F0F0;
}
Still no dice on the hover. The standard does take effect but the hover does nothing. My question is this:
What are the rules on assigning pseudo-classes in general? Not just in my case above but are they only for anchors or can you use them for any elements?
Thanks in advance.
Edit: this is not local to IE. This problem happens in Opera 9 and FF3 as well.
Edit2: I feel it has something to do with the fact hover needs link and visited prior to it. It seems as though the browsers ignore link and visted if they don't have an anchor tag around them? This is purely speculating but I wonder if it holds any merit?
Not just in my case above but are they
only for anchors or can you use them
for any elements?
Well, no. CSS pseudo-classes are used to add special effects to some selectors.
The syntax of pseudo-classes:
selector:pseudo-class {property:value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property:value}
Anchor Pseudo-classes
Links can be displayed in different ways in a CSS-supporting browser:
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
Pseudo-classes can be combined with CSS classes:
a.red:visited {color:#FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
If the link in the example above has been visited, it will be displayed in red.
The :first-child Pseudo-class
The :first-child pseudo-class matches a specified element that is the first child of another element.
In the following example, the selector matches any element that is the first child of any element:
<html>
<head>
<style type="text/css">
p:first-child
{
color:blue
}
</style>
</head>
<body>
<p>I am a strong man.</p>
<p>I am a strong man.</p>
</body>
</html>
Pseudo-classes
The number indicates in which CSS version the property is defined (CSS1 or CSS2).
:active Adds a style to an element that is activated 1
:first-child Adds a style to an element that is the first child of
another element 2
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link 1
More information here.
If you're looking for rules for assigning pseudo-classes in general, this link will help you:
http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes
You can use pseudo-selectors for any element you like, whether the browser/user-agent interprets or applies them is, sadly, entirely up to them.
A detailed review of css pseudo-selectors (I couldn't find one specifically limited to pseudo-selectors) is over at: Quirksmode.
In short IE6 is a problem for :hover and :active on anything but links; IE 7 plays slightly better, but only supports :active on non-links.
IE8 seems to be pretty well up-to-spec, insofar as css2.1 pseudo-selectors go.
I think I just found the answer....
My code was flawed.
input.as_link:hover {
text-decoration: underline;
background: yellow;
}
input.as_link:focus {
text-decoration: underline;
background: yellow;
}
input.as_link:focus:hover {
text-decoration: underline;
background: yellow;
}
Underscore doesn't work because it's not "text" and the text isn't highlighted. Shame but oh well, the background colour I chose didn't show up... I guess I typed in one incorrectly (or the same as the background). The bright yellow worked.
Thanks to everyone who replied though!