Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am trying to apply styling to just one anchor in a html document. However, I have tried a[title] to try and apply css styling to just that one element, but nothing happens. Why would this not work. I would appreciate some feedback as to how style using this type of format. Thanks
html code
<div class="col_2">
<img src="img/blueman.png" width="70" height="70" class="img_left imgshadow" alt="" />
<p class="newsSpace">Signout</p>
</div>
css code
a[title] {
font-size: 24px;
font-family: Verdana, Geneva, sans-serif;
/* border-bottom:1px solid #777777; */
}
main menu code
#menu li a {
color: #000000;
display: block;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
outline: 0 none;
text-decoration: none;
}
The selector you've written should work, and indeed as you see from the other comments and answers, it does work when used in isolation.
The most likely reason why your CSS wouldn't work is if something else in your CSS is being applied in preference over it. CSS has a strict order of precedence for selectors, and it would be quite easy to write a selector that was considered higher precedence than a[title].
I suggest taking a look at the element in your browser dev tools (ie Firebug, etc) to determine what styles are being applied to it, and by what selectors.
If I'm right, you will see the a[title] styles are there, but are crossed out because other styles have been applied as well that have higher precedence.
Here's an article that describes the CSS order of precedence.
There are four ways I can suggest to get around this problem:
Adapt your a[title] selector so that it has higher precedence than the other selectors. This would typically mean making it more precise, eg .newsSpace>a[title].
Adapt the other selectors so that they have lower precedence.
Add !important to the end of your styles, to force the browser to give them maximum precedence. (this is the "quick win" option, but should be considered a last resort; using !important typically means you're doing something wrong elsewhere)
Change your HTML to give the element its own class or ID, and use that for your selector instead of a[title].
Hope that helps.
[EDIT]
OP has commented below with an updated fiddle link, and I can now see the problem:
Okay, thanks for the updated link. I can now see #menu li div a[title] in the CSS code.
Looking at the element in question using Chrome Dev Tools (F12), I can see that all the styles for that are being applied successfully to your Signout element. However, the font-size property is being overridden by #menu li:hover div a, which is classed as being more specific due to the :hover.
Since the element is only visible when it's being hovered, the solution would seem to be simple: just add the same :hover property to #menu li div a[title] as is applied to the other selector.
So change it to #menu li:hover div a[title]
Here's your fiddle again, with that simple change made to it: http://jsfiddle.net/TrScN/3/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
Really simple question;
I have a link in HTML that I need to resize, I have edited the CSS file to create this class:
.redirect {
font-size: 1em;
}
In the main PHP file I have the tag set up as follows ---->
<a class="redirect" href="https://www.irijobs.com"><font color="blue"><< Click here to go back to irijobs.com homepage <<</font></a>
There has been absolutely no change in size... any pointers? I'm sure it's a simple syntax error.
Edit: Most of my styling errors were from the prior developer wrapping CSS in HMTL tags, which was not only unnecessary but confused the browser.
Font size 1em is equal to the current font size. You have to increase the em to see the changes, for example 1.5em or 2em to double the size.
.redirect {
font-size: 1.5em;
}
Do not use <font> tag as it is deprecated since HTML 4. Just do the following and apply any size to font-size:
.redirect {
font-size:1em;
color:blue;
}
<a class="redirect" href="https://www.irijobs.com"><< Click here to go back to irijobs.com homepage << </a>
First, you should change < in << Click here to go back to irijobs.com homepage << to <. It is because browser thinks that < sign starts a new tag, like <a>.
Second, font-size: 1em means that font size is equal to default. 2em is 2 times bigger, and 0.5em is half of original size.
I suggest you to change <font> tag to CSS rule color:blue;. <font> tag is deprecated in favor of CSS color property.
Also, multiple spaces are displayed as single one.
CSS:
.redirect {
font-size: 2em; /* or some another value, may be also in pixels (like 20px) or points (like 16pt)*/
color: blue;
}
HTML:
<a class="redirect" href="https://www.irijobs.com"><< Click here to go back to irijobs.com homepage <<</a>
This question already has answers here:
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
(3 answers)
Closed 5 years ago.
Why does w3schools say that when we write anchor pseudo-classes in CSS we should write a:link first then a:visited followed by a:hover and finally a:active to be effective?
From: https://www.w3schools.com/css/tryit.asp?filename=trycss_link
How does the order of pseudo-classes effect the effectiveness?
Because there is a priority order.
if hover was before visited, then hover wouldn't get ever applied, because it would be "forever" overwritten by visited style (if it has been really visited), that was applied after.
Same goes for :active (mouse down) - if it's defined before hover, then hover will always overwrite :active(mouse down)
Makes sense?
On the other hand, this is just "conventional rule" - it is not forced. If anyone wants to have :visited higher priority, overriding :hover/:active - you are free to do so - it simply would be just unconventional
And lastly, it is not only order that plays the role of style priority.
Elements that are more explicitly defined have higher priority.
Styles that are !important will have higher priority than explicitly defined styles.
Explicitly defined styles with !important and set last will have "ultimate" priority.
To question "Why would you want to use these to override styles? Wouldn't it be better just to make styles in your CSS file correctly ordered?" - Reason to use overrides by more explicit definition and !important priority overrides comes handy when you use large css/theme/bootstrap, that you haven't created and you have to quickly override/change some stuff... These dirty overrides come as a quick/cheap (not very pretty) solution.
.theBad:active {
color: red;
}
.theBad:hover {
color: green;
}
.theGood:hover {
color: green;
}
.theGood:active {
color: red;
}
the Good - this will turn red on mouse down
<br />
the Bad - this poor little thing will not
<!--#ordermatters, The Ugly is lurking somewhere in the shadows-->
From SitePoint
This isn’t the only useful order, nor is it in any way the “right” order. The order in which you specify your pseudo-classes will depend on the effects you want to show with different combinations of states.
This question already has answers here:
Chrome Developer Tools: How to find out what is overriding a CSS rule?
(3 answers)
Closed 7 years ago.
When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: .div .class > .class).
I will encounter situations like this:
How do I find out what style is overriding my style? I want to avoid using !important because eventually I'll end up in the same situation.
EDIT: I'm not asking why this is happening. I already know about priority, hence why I mentioned that .div .class has a higher priority than .class. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.
EDIT: actual problem fixed, but the question still remains... is there an easier way to see what causes the override?
Fix: I just needed the selector in the proper order. .box first, then .box-blue.
In devtools, in the style inspector, choose Computed. Find the property you are interested in and click it. You will see a list of all the rules that apply to this property, with the active one at the top, and each with a file/line reference to where it is defined.
Consider the following HTML:
<style>
#foo { color: red; }
p { color: blue; }
</style>
<p id="foo">What color am I?</p>
You would see the following:
You can scroll up or down the styles tab in Dev Tools you use from the above example to find the selector overriding .box-blue. Once you found the enabled border-color in another style, then you can determine what selector overriding it.
When you styled .box-blue with border-color: red for example, it could be overriden with another style with the possibly same property, border. Because border: 1px solid blue could be a shorthand for border-width: 1px + border-style: solid + border-color: blue, Then it could be the possibly overriding the previous style.
There are browser extension that help with this. I use "Web Developer" in Firefox, but there are many others.
Chrome also has View > Developer > Developer Tools.
If you mouse over an item on the screen they will tell you its path (html > body > div.blah > span.foo) and what css styles were applied to that item.
There's no definitive way to infer which selector overrides a given style (as far as I know), but the dev tools interface is intuitive enough that it's normally straightforward to work it out.
Your overriden style shows with a strike through. To find out which selector overrides it, look for an unstruck version of the same rule.
Sometimes this is as easy as seeing:
color: red;
And having to look for a selector with:
color: blue;
Chrome dev tools actually sorts the selectors by priority, so if you find an overridden, style you can be guaranteed that the override will be in the same selector or in one of the ones above it.
But you'll have to remember that some rules are composed of others and you won't always find a corresponding rule with the same name. In your example your border-color rule is being overriden by the border rule from the above selector. The border rule is shorthand for specifying border-width, border-style and border-color.
In your image you can see the .box-blue class's border-color: #bce8f1 rule has been overridden by the border: 1px solid transparent (I cannot see the selector). You can see CSS files of the overridden CSS rules right side of the selectors in Inspect tool.
Sometimes CSS rules might be changed by the JavaScript. It might be shown as inline CSS.
In Firefox Developer Tools you can find it out in one click near the overridden property in the Inspector:
Overridden declarations
Starting in Firefox 43, overridden declarations have a magnifying
glass next to them. Click the magnifying glass to filter the rule view
to show only the rules applying to the current node that try to set
the same property: that is, the complete cascade for the given
property.
This makes it easy to see which rule is overriding the declaration:
https://www.youtube.com/watch?v=i9mDVjJAGwQ
Here's how it looks. Check out the video to see it in action.
Here is a simple explanation.
Certain selectors will override existing ones for example
p {
color: green;
}
.Paragraphs {
color: yellow;
}
#paragraph2 {
color: red;
}
<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>
As shown the selector p is overridden by selector .Paragraphs and the selector #paragraph2 overrides .Paragraphs and the style attribute overrides #paragraph2 and of course any selector with !important will override mostly everything.
Currently I've got somewhere in my css a:visited{color:purple} thing is this works fine for hyperlinks but I created a button using some css and an a tag but the problem is that I don't want it to inherit the visited color, how do I change this ?
So use a stronger selector like
.button a:visited {
color: #000;
}
And over ride the default one.
The :visited psuedoclass has the same specificity as a class, so if your button is just .button it will win. However, if you use a.button then it will lose if the button is defined after the :visited style. You can further boost the specificity with something like html a.button to guarantee a win.
This question already has answers here:
Twitter bootstrap override `a` in `navbar`
(3 answers)
Closed 9 years ago.
bootstrap.css is overriding my style... How can I avoid this to happen? How can I force the css to load first?
One thing that is a problem is that the website where it needs to be is using #import to load the css files (this cannot be changed, the customer doesn't want to change that).
Any ideas?
***Note****
I cannot modify the current site at all. I just have to include bootstrap.css without overriding anything else. Is this possible?
You need to write a more specific selector. Remember that ID has the most weight. You can temporarily mark it with !important to check if you are targeting it correctly.
If you are targeting a anchor in a list item for example then to overwrite the reset styles you can write something like nav ul li a{color: black;}
You simply have to increase the specificity of your rules. This means adding more to your selectors, say you have .elem { color: blue; }, you can make it .parent .elem { color: blue; }
Or using !important, like .elem { color: blue !important; }