Css Style not working?

Question

It may just be me, but sometimes I think im starting to get the hang of this css stuff' and then it goes back to 'I dont have a clue.'

so, I have a default style

a:focus,
a:hover,
a:active {
  outline: 0 none;
  text-decoration: none;
    color: #fff;
}

but on a couple of <a href..> I need to overwrite the style, so I have added the following to my css

a.myBlue a.myBlue:hover {
  color: #3078ef ;
}
.myBlue a:hover {
     color: #3078ef ;
}

(Yes, I've done this twice)

and applied

<a href="/Client/Edit/@item.ClientId" class="myBlue"></a>

But in Chrome, looking at developer tools its still applying the standard style, it does not even pull "myBlue" down?

Where am I going wrong?

It may be a caching issue. Try clearing your cache. Also, unless you put some text in your anchor element, you won't be able to see it. — foxygen
– foxygen, Commented Nov 7, 2014 at 11:47
myBlue is the class of the a so just use .myBlue:hover{...} — Vucko
– Vucko, Commented Nov 7, 2014 at 11:48
a.myBlue a.myBlue:hover should be a.myBlue, a.myBlue:hover. I've voted to close the question as a simple typographical error. — James Donnelly
– James Donnelly, Commented Nov 7, 2014 at 11:51

Andrew Shepherd · Accepted Answer · 2014-11-07 11:48:23Z

5

The css selector:

a.myBlue a.myBlue:hover

Means "Any a of class myBlue that is being hovered over and is a child element of an a of class myBlue.

If you wish to apply the same style to multiple selectors, you need to separate each selector with a comma:

a.myBlue, a.myBlue:hover

answered Nov 7, 2014 at 11:48

Andrew Shepherd

45.5k33 gold badges148 silver badges212 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

KiV · Accepted Answer · 2014-11-07 11:48:52Z

0

There is a typo mistake in your code...Use below code. it works...

a.myBlue, a.myBlue:hover {
  color: #3078ef ;
}

answered Nov 7, 2014 at 11:48

KiV

2,26817 silver badges18 bronze badges

Comments

Pattle · Accepted Answer · 2014-11-07 12:00:19Z

0

Your CSS selector is wrong, how you've got it present means it only applies the rule when you hover over an element with the class of .myBlue which is the child of another element with the class of .myBlue. So instead your selector needs to be

a.myBlue, a.myBlue:hover { /* notice the comma */
  color: #3078ef ;
}

answered Nov 7, 2014 at 12:00

Pattle

6,0458 gold badges37 silver badges59 bronze badges

Collectives™ on Stack Overflow

Css Style not working?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related