CODEWITHSUNDEEP
htmlcss
ispiro
ispiro

Reputation: 27633

Is there a difference between these two CSS notations for applying a style to a certain class?

I've seen the following two notations on CSS pages, and they seem to work the same, is there a difference between them?

.ClassName  a:hover

And:

a.ClassName:hover

Upvotes: 2

Views: 107

Answers (6)

Burhan Khalid
Burhan Khalid

Reputation: 174624

The first modifies the hover property for any link inside any element that has ClassName applied.

The second is for any a that has ClassName applied, irrespective of any closing containers or tags.

Upvotes: 1

sandeep
sandeep

Reputation: 92803

.ClassName a:hover means anchor inside .ClassName . it's

HTML

<div class="ClassName ">
 <a></a>
</div>

OR

a.ClassName:hover means .ClassName with anchor. It's

HTML

<a vlass="ClassName"></a>

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359776

Yes, there absolutely is a difference.

  • The first matches hovered anchors which are descendants of elements with class ClassName.
  • The second matches hovered anchors with class ClassName.

Upvotes: 1

Simon Dorociak
Simon Dorociak

Reputation: 33495

a.ClassName:hover

<a class="ClassName" href="#">fff</a>

.ClassName a:hover

<div class="ClassName">
  <a href="#">fff</a>
</div>

First approach works only for <a> elements with class ClassName.
Second approach, class can be used for any element and if that element contains <a> hover property will be processed.

Upvotes: 2

jeffjenx
jeffjenx

Reputation: 17457

Yes, there is a difference between them.

.ClassName a:hover refers to any hovered anchor that is within an element with class="ClassName".

a.ClassName:hover, however, refers to any hovered anchor that has class="ClassName".

There is lots of information regarding CSS Selectors at W3.org.

Upvotes: 4

Dipak
Dipak

Reputation: 12190

.ClassName  a:hover //this applies to all child `a` elements of `ClassName`
<div class="ClassName">
  <a>link</a>
</div>

a.ClassName:hover //this applies to the `a` elements that have `ClassName` class
<div>
  <a class="ClassName">link</a>
</div>

Upvotes: 3

Related Questions