CODEWITHSUNDEEP
csshtml
Echo
Echo

Reputation: 13

Specific HTML class with CSS

I am creating a code for I website I use. There are multiple different areas for link color, and they seem to overlap and I am unsure how to fix it.

My HTML is

<div class="floatbox" style="width:200px;height:200px;padding:5px;font-size:15px;position:fixed;left:2px;bottom:10px;overflow:auto;font-color:#3c5eb2;">
</div>

Within this I have links. My CSS is

#floatbox a:link, a:visited, #a:active{color: #BF00FF;}
#floatbox a:hover {color: #BF00FF;text-decoration: underline;}

I have tried using the "!important" tag and nothing is working. If the tag isn't there, all links on the page stay white. If I add the "!important" tag, half the website's links turn purple. I am a beginner coder and I may not be targeting the class properly.

Any help is appreciated!

Fiddle

Upvotes: 0

Views: 85

Answers (2)

mrsean2k
mrsean2k

Reputation: 11

If this is your actual code, there are a couple of (simple) things that are inconsistent with what you're trying to achieve:

1) you define #floatbox: this is a CSS selector targetting a specific ID equal to "floatbox", whereas you want to target a class. The correct syntax for targetting a class is to prefix the name with "." so you want ".floatbox" in your CSS file

2) you have what looks like a small typo in the first line of CSS: "#a:active" should read "a:active"

w3C schools has a straightforward explanation of simple selectors:

http://www.w3schools.com/css/css_selectors.asp

the :link, :visited etc. pseudo selectors are also sensitive to the order they're declared, again explained here:

http://www.w3schools.com/css/css_pseudo_classes.asp

I can never remember the order myself :)

ETA: Looking at your fiddle, the issue is that you have an ID - "#white" - that encloses the div with "floatbox" class. ID styles take precedence over class styles, even when applied very specifically here. I'd say the easiest thing is to change the "#white" id based style for a ".white" class based style, then you should see precedence applied as you'd like it.

Upvotes: 1

Jon P
Jon P

Reputation: 19797

It is important to get to know the tools you need when working with CSS. When you get unexpected behaviour use either Developer Tools in Chrome, or Firebug For Firefox. These tools enable you to inspect an element inplace in a browser and see what CSS rules are affecting them, and just as importantly what rules are being overidden.

You also need to get an understanding of the principles of Cascading and Specificty

Update

You have a class in your html (as it should be) and an ID in the CSS.

Try the Following: 

div.floatbox a:link, 
div.floatbox a:visited, 
div.floatbox #a:active
{
    color: #BF00FF !important; 
}

div.floatbox a:hover {color: #BF00FF !important;text-decoration: underline;}

http://jsfiddle.net/54UQg/4/

OR

Because .floatbox is a child of #white you can use specificity rules to avoid using !important:

#white div.floatbox a:link,
#white div.floatbox a:visited,
#white div.floatbox #a:active
{
    color: #BF00FF;
}

#white div.floatbox a:hover {color: #BF00FF ;text-decoration: underline;}

http://jsfiddle.net/54UQg/5/

Your original issue stemmed from 2 problems, you were targeting an ID with your CSS when it was a class, and secondly, IDs rank higher than classes in the specificity rules.

Upvotes: 0

Related Questions