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; }
Related
This question already has answers here:
What's the difference between CSS3's :root pseudo class and html?
(4 answers)
Closed last year.
I often see people use this line in CSS at the beginning of the .css code. Can someone explain what is it used for? I know that is used for defining the style of the highest parent, but i dont know what that means.
As you're already aware:
From this page: CSS-Tricks :root selector
The :root selector allows you to target the highest-level “parent” element in the DOM, or document tree.
This page provides syntax as well: developer.mozilla :root{}
Here's an example you can run:
:root {
background-color: cornflowerblue;
padding: 3em;
}
body {
background-color: white;
padding: 1.5em;
}
<p>We can take advantage of being able to apply CSS to the <code><html></code> element to skip the wrapper <code>div</code> and keep our markup clean!</p>
This question already has answers here:
Is it possible to give one CSS class priority over another?
(7 answers)
Does repeating a classname in a CSS rule increase its priority?
(2 answers)
Can type selectors be repeated to increase specificity?
(1 answer)
Closed 2 years ago.
There is a situation that I need to change the class priority. For example:
.one {
color: green;
}
.comment {
color: gray;
}
.red {
color: red !important;
}
<div class="one two red">Content</div>
<div class="comment two red">Content</div>
At the moment, .red color is applied. Is it possible to force .comment.red to get the color from .comment?
Note: The .comment color is unknown (comes from changeable themes).
Yes, you can use multiple classes to make it more specific. Also, we know that .comment.red needs to have min two classes. So I feel this is allowed:
.one {
color: green;
}
.comment.comment {
color: gray;
}
.red {
color: red;
}
<div class="one two red">Content</div>
<div class="comment two red">Content</div>
But please get rid of !important.
The .comment's rule, instead of it being like this:
We can make it like this:
More Explanation
Modern browsers compute the style contexts using the rule tree. If multiple rules have the same weight, origin and specificity, the one written lower down in the stylesheet is considered and wins.
When there's only one selector here:
.class1 {}
The weight of the above rule is 0010 as per CSS specificity. The same way, if there are two classes:
.class1.class2 {}
.class1.class1 {}
Note that in the second line, I have written twice the same class. Both will be computed to 0020, which is higher than the first one, in spite of the "unknown" class, we have two classes in the rule now.
This is the same trick I used in the above example to make the theming easier.
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.
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/
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 9 years ago.
is it possible to effect a parent node based on a child node's :hover state? ie.
nav ul li a:hover {
/* something here to effect the li or the ul or the nav elements */
}
not that bothered about compatibility, I am looking to be using latest firefox/chrome and ie9/10 only based on the target audience of the app. So CSS3 and browser specific CSS is fine, though I would like to avoid jQuery (and javascript in general) if possible.
Its not possible right now, as you can only style downstream siblings or descendants while hovering other another element (as of Selectors Level 3)
However, when Selectors Level 4 becomes stable and UA's start implementing it, you can eventually use the parent combinator - e.g.
<h2>Hello<span>World</span></h2>
h2! > span:hover {
background: azure; /*the h2 background changes while hovering over the span */
}
You should better use javascript onmousehover event instead.
Something like,
<script>
function onhoverstylechange()
{
document.getElementById("id").style.color='red';
}
</script>
<div id="id">
Change
</div>
and just apply any css or css file in the javascript function.