CODEWITHSUNDEEP
css
Dorjan
Dorjan

Reputation: 2037

CSS:hover and pseudo-classes in general

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?

Upvotes: 1

Views: 2137

Answers (4)

Dorjan
Dorjan

Reputation: 2037

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!

Upvotes: 0

eKek0
eKek0

Reputation: 23329

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.

Upvotes: 3

David Thomas
David Thomas

Reputation: 253506

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.

Upvotes: 1

Santi
Santi

Reputation: 4468

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

Upvotes: 1

Related Questions