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!
Related
Active property is not working in Firefox; I used this code:
#selec:active{background-color:red;}
The property works in Chrome, but not working in Firefox.
Let me assume that you have really understood what :active means in CSS. It applies style right at the moment when you are clicking. So it those styles wont last long if the page refreshes.
Even though it is not much big deal, there is an order to style these if you applying :hover :link and :visited.
Please check whether you followed them
a:link { /* Essentially means a[href], or that the link actually goes somewhere */
color: blue;
}
a:visited {
color: purple;
}
a:hover {
color: green;
}
a:active {
color: red;
}
i have a main "div" with multiple divs and "a" tags and i wanted to set a "template like" css to make them all look the same, but some of the A tags need to be different so i thought about making it like this:
<div class="main">
CLick A
<br/>
CLick B
<br/>
CLick C
....
</div>
and on the css:
.main a{
/* Links Scheme */
}
.exception{
/* particular link css */
}
But the browser gives preference to my "template" instead of the particular class. shouldn't the class be the most important or am i missing something?
FIDDLE Link
PS: without the use of "!important" tag please
This is an issue of specificity. Since .main a includes a class and a tag name, it is more specific, and thus gets higher precedence than just a class name.
So, to solve it, use .main .exception for your exception.
.main a is more specific then .exception. I think what you are going for is:
.main a{
/* Links Scheme */
}
.main a.exception{
/* particular link css */
}
In css, orders are also determined by how specific the selector is, so try changing .exception to .main a.exception.
jsFiddle: http://jsfiddle.net/jdwire/DFNyW/2/
you can use :not() pseudo-class, The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class. so you can fix code like this:
.main a:not(.exception){
color: #3b5998;
outline-style: none;
text-decoration: none;
font-size: 11px;
font-weight: bold;
text-decoration: none;
}
.exception{
color: #0498ba;
font-family: Verdana, sans-serif;
font-size: 30px;
letter-spacing: 2px;
margin: 0 0 0;
padding: 0;
font-weight: bold;
text-decoration: none;
}
<div class="main">
CLickA
<br/>
CLickB
<br/>
CLickC
</div>
I'm using this code:
::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
::selection { background: #c92127; color: #fff; text-shadow: none; }
Now I want to use this on any element inside a certain div.
My code for my wrapper is
<div id="wrapper" class="Red">
So I went with this for my CSS selector
div#wrapper.Red::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red::selection { background: #c92127; color: #fff; text-shadow: none; }
But this does not work. It does work when I just use the selection code at the top of this question though.
So my question is: Does ::selection apply to all child elements (i.e. my selector is wrong) or is this not possible?
Here is an example in response to BoltClock's jsFiddle
http://jsfiddle.net/6DBhV/1/
Your div#wrapper.Red::selection styles will indeed not be inherited by the ::selection of any children (in your fiddle, it's div#test::selection). Due to the way inheritance works in CSS, pseudo-elements cannot inherit from other pseudo-elements even if their real elements are related in some way as parents or children. The issue of nested selections was covered in much greater depth in this CSS WG mailing list thread.1
The reason why your ::selection style works is because the pseudo-element is applied to all elements, including both of your <div>s.
An easy solution to this is to separate ::selection from the rest of your simple selectors with a combinator:
/* Notice the space here - the descendant combinator */
div#wrapper.Red ::-moz-selection { background: #c92127; color: #fff; text-shadow: none; }
div#wrapper.Red ::selection { background: #c92127; color: #fff; text-shadow: none; }
Updated fiddle
1 This is also one of the reasons why ::selection was dropped from CSS UI 3. Here's hoping it'll return in UI 4 after it's further tested and defined.
To apply/include all child elements, this is my solution :
div#wrapper > * ::selection,
div#wrapper > * ::-moz-selection {
background-color: #c92127;
}
It works for Firefox and Chrome.
Ref: CSS * Selector and
CSS element>element Selector
On the web page which I am coding, I found difference in displaying list between Chrome and (IE and Firefox).
I suppose my style sheet is wrong. But where?
Why the contents of "li" are set to new line on IE and Firefox?
I want display like Chrome
On My Stylesheet:
a {
color: #F60;
text-decoration: none;
}
a:hover{
color: #F60;
text-decoration: underline
}
li {
margin: 0px 0px 0px 10px;
}
The Result is as this image:
I tried
ul{
display: inline
}
but, it removed marker on the head.
It seems it's this bug, but it implies that your <a> are block elements.
By the way, don't need to redefine same color in :hover.
i have a a:hover for all my links on my page:
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
thanks
Yes that should work fine, although you likely don't want to set none unless you really don't want any style... setting your base colors etc. should work fine.
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none: line was terminated with a colon vs. a semi-colon thus it would have caused issues.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
thanks for all the answers.
Rather than using id with css use Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important"..
So for your problem you can try:
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
Link with reset
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
I think if you do the reverse of what Pranav said, you can have less modifications i,e
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
</div>
</body>
</html>
As you can see, I'm defining the a style using the not selector. So, I'm saying that I want to put a green background and a red color to all the a that doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the style defined and Test 2, Test 4 and Test 6 will be normal, without the style.
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whatever if you want.
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
If you want only particular page, add
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}