CODEWITHSUNDEEP
csshovercss-selectors
Memochipan
Memochipan

Reputation: 3465

Hover syntax difference

What is the difference between:

a.cvc-formsHelpText:hover {
text-decoration:none;
}

And:

.cvc-formsHelpText:hover {
text-decoration:none;
}

The HTML is: 

<a class="cvc-formsHelpText" href="javascript: void(0)">
<img src="img.gif">
<span>Text.</span>
</a>

The first works and the second not, but both refer to <a> tag.

Upvotes: 1

Views: 131

Answers (6)

DwB
DwB

Reputation: 38300

a.blah defines a class for anchor tags (the "a" tag). .blah defines a class for any tag.

Upvotes: 1

Darren Griffith
Darren Griffith

Reputation: 3460

The first says that all "a" tags are found that have "cvc-formsHelpHext" for the CSS "class" attribute. The second looks for tags named "cvc-formsHelpHext", which is not what you are trying to do.

Upvotes: 0

David Hedlund
David Hedlund

Reputation: 129792

The problem, when you're saying that the second doesn't work, is that you've omitted a dot, as BoltClock points out: .cvc-formsHelpText

As for the difference between the two syntaxes, the former denotes that the element must be an anchor with the class cvc-formsHelpText. The latter selector (provided that you include the dot that you've omitted) applies to any element with the class cvc-formsHelpText. Obviously, if only anchor elements contain that class, there will be no perceived difference in the way your website behaves.

Upvotes: 1

Ned Batchelder
Ned Batchelder

Reputation: 375574

cvc-formsHelpText:hover means: an element named cvc-formsHelpText, hovered. For example, <cvc-formsHelpText>, which doesn't exist.

a.cvc-formsHelpText:hover means: an <a> tag, with class cvc-formsHelpText, hovered.

Upvotes: 0

coreyward
coreyward

Reputation: 80041

It has nothing to do with hover at all. 

#id element.class:pseudo-selector {
  property: value;
}

That's the general syntax. The first selector works because it's selecting the cvc-formsHelpText class, not trying to fruitlessly target a non-existent cvc-formsHelpText element.

Upvotes: 1

twodayslate
twodayslate

Reputation: 2833

cvc-formsHelpText is a class. You need a "." in front of it if you want to style it.

.cvc-formsHelpText:hover {
text-decoration:none;
}

Upvotes: 0

Related Questions