I have 2 css files in my page:
Site.css
jquery-ui.css
Site.css is listed BELOW the jquery-ui css
I have a link that looks like this on my page:
<a class='closeClueTipLink'>close</a>
and the issue is that the link is showing up black instead of the normal blue text. When i use firebug to figure out why, i see this:
I don't understand why .ui-widget-content (which has the color #222222) is overriding .closeClueTipLink (which as color:blue) given that site.css is below the jquery one.
Any ideas or suggestions why this ordering is happening ?
Because there's an a selector just after .ui-widget-content:
.ui-widget-content a
Making it more specific than .closeClueTipLink, even though .closeClueTipLink is found in a later stylesheet.
You could easily balance this out by adding the same type selector to your other rule so you get a.closeClueTipLink, making both selectors equally specific (1 type and 1 class). Then that, being the rule that's defined and loaded later, will apply and your link text will be blue.
Quick Fix:
Add an "a" before your class selector:
a.closeClueTipLink {
Explanation:
It has to do with Specificity [details].
The .ui-widget-content a is more "specific" because it references a class AND an element, as opposed to yours which just references a class. Therefore, the .ui-widget-content a will override anything less specific regardless of location/placement of code.'
By adding an "a" before your selector, you make it ALSO reference an element and a class, therefore it's no longer less specific and will use location to determine.
Example:
/* css */
div p { color: red; }
p { color: blue; }
<!-- html -->
<div><p>Text</p></div>
The text in the above paragraph will be red because the first CSS item is more specific than the second.
.ui-widget-content a is more specific than .closeClueTipLink so it will overide it no matter what order they are placed in.
change it to read
a.closeClueTipLink
Because .ui-content-content a { } is loaded after the previous style .closeClueTipLink.
I am pretty sure jquery...tom.css is loaded after site.css, so the styles defined later overrides previously defined styles.
There are ways you are amend this problem:
Pinpoint the selector like .ui-content-content a.closeClueTipLink
Use !important at the end of color defination. color: #222 !important;[not recommended]
Related
In my CSS, I have this:
b {
color: Red;
}
And in my body:
<b>Hello world!</b>
As a result, I get "Hello world!" text that is red in color.
However, as I add more classes:
.myClass {
color: Blue;
}
.green {
color: Green;
}
And I modify my body:
<b>H<a class="myClass">ell</a><a class="green">o</a> wo<a style="color: Black;">rl</a>d
I will not get the same result as earlier.
Is there a way to strictly set a CSS style? Which means that with the above code I wish to get "Hello world!" text that is red.
Thanks
This is a question of CSS Specificicty
The concept: Specificity is the means by which a browser decides which
property values are the most relevant to an element and gets to be
applied. Specificity is only based on the matching rules which are
composed of selectors of different sorts.
Inline styles override external CSS, and class selectors override element level selectors.
The following list of selectors is by increasing specificity:
Universal selectors
Type selectors <--- your b CSS
Class selectors <---- your .xyz CSS
Attributes selectors
Pseudo-classes
ID selectors
Inline style <--- your style=''
If you wish to override specificity, you can use !important after the rule in question, e.g.:
b {
color: Red !important;
}
However, this is not recommended, instead you should write 'better' rules (more specific) to target your HTML as appropriate. This ensures you end up with better structured code, the issue with !important being it can lead to unforeseen circumstances where rules aren't working because you may have forgot you had previously overridden them.
Again, from MDN:
The !important exception
When an !important rule is used on a style declaration, this
declaration overrides any other declaration made in the CSS, wherever
it is in the declaration list. Although, !important has nothing to do
with specificity. Using !important is bad practice because it makes
debugging hard since you break the natural cascading in your
stylesheets.
Some rules of thumb
Never use !important on site-wide css. Only use !important on
page-specific css that overrides site-wide or foreign css (from ExtJs
or YUI for example). Never use !important when you're writing a
plugin/mashup. Always look for a way to use specificity before even
considering !important
With the markup that you provided, no. Otherwise, maybe
The inline style has priority over the stylesheet so part of the text will be black no matter what. You might be able to create a rule that has enough specificity that it will take precendence over any other rules.
b, b .myClass, b .green {
color: red;
}
Though this can get troublesome to maintain. And there is still a chance that a different css rule will get higher precedence later on. I am not completely sure that even specifying all the children with * will do it.
You seem to be asking whether you can set a property (color in the example) on an element in a manner that will not be overridden by settings on inner elements.
You cannot do that with settings on the element itself. But you can set a property on an element and all of its descendants:
b, b * {
color: Red !important;
}
This will override any normal settings for color on inner elements. But it is ineffective against, say, .green { color: Green !important; }. To defeat that, you would need a more specific selector, such as b .green, for your rule—so there is no general way to achieve that (i.e., a way that is independent of the specific markup used inside the element).
Here is the page I am affecting:
http://www.careerchoiceswithlaura.com/blog/
Inspecting the elements will show that I set up one class "blog-post" and added it to each entry on the page. Then, I use a simple algorithm to apply a class named "even-numbered" or "odd-numbered" as well for appropriate entries so I can stagger the color effects and make the page more readable.
The problem is, that when I apply rules using the following line in my CSS file:
.blog-post .odd-numbered { background: #ddd; }
..it doesn't affect the elements with both blog-post and odd-numbered; in fact, the rule affects nothing on the page.
Could someone explain why, and which class selectors I should be using to affect said elements?
I researched online, and find this article at W3 very helpful usually (and it appears that the rule should be working if you look at /blog/:279 on the page I mentioned above), but even with the rule there it doesn't seem to be anything to the elements I am trying to target.
Your example selector targets elements with the class odd-numbered that have an ancestor element with the class blog-post.
In your HTML, the .blog-post element is also the .odd-numbered element.
Your selector, then, should be .blog-post.odd-numbered (note the lack of a space).
You'll want these CSS pseudo-selectors:
elementname:nth-child(even)
and
elementname:nth-child(odd)
Documentation:
http://www.w3.org/Style/Examples/007/evenodd
To style the same element with two classnames, you will want (without a space):
.blog-post.odd-numbered { background: #ddd; }
You original style, with a space, styles an element with the class odd-numbered inside an element with the class blog-post
from CSS3
:nth-child(odd)
You should apply as .blog-post.odd-numbered { background: #ddd; } without space btw css classes, If it is applied to same element.
When using multiple css files on the same page and they collide, how do i know which one is going to be used? For example, if one says blue body background and the other one says red.
Quick Answer:
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one.
BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
Example 1:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
.name { color: blue; }
.name { color: red; }
</style>
The above example will make the color red. Both selectors are the same, and therefore also have the same specificity. And because CSS reads top-to-bottom, we first tell it to be blue, but then we override that by telling it "nevermind, make it red".
Example 2:
<div class="container">
<div class="name">Dave</div>
</div>
<style>
#container .name { background-color: blue; }
.name { background-color: red; }
</style>
The above example will make the background color blue, even though blue was first because the selector is more "specific".
Exception (the use of !important):
The inclusion of !important will override both specificity and order, but in my opinion, should only be used if you're trying to mess with a third party code in which you don't have access to change it any other way.
External CSS:
Overwrite rules work the same on external CSS files. Just imagine putting them first-to-last, top-to-bottom. The selectors called in the first file(s) will get overwritten by same-specificity-selectors in any subsequent files. But specificity will still trump order within the same file or in multiple files.
How to test:
In Chrome, Firefox, and modern versions of IE (probably Safari too), you can right click on something and click "Inspect Element". This will show you the HTML as well as any applied CSS. As you scroll down the CSS (usually on the right), you'll see things that are crossed out - that means they're either incorrect CSS or have been overwritten. To test, you can modify the CSS selectors (either in your own code or right there in the developer tools box) to make them more specific and see if that makes then un-crossed out...etc. Play around w/ that tool - it's VERY helpful.
Not sure how "specific" something is?
Try some of the many online CSS specificity tools:
https://polypane.app/css-specificity-calculator
https://specificity.keegan.st/
https://www.codecaptain.io/tools/css-specificity-calculator
This is such a simple issue but I can't seem to find an exact answer anywhere...
Simply, can I declare attributes on a selector in two different places without overwriting the first attribute declaration?
For example, say I declare an attribute to an element within a CSS file loaded into a page:
.x {margin:2px;}
I then want to declare another attribute within the page dynamically:
.x {padding:2px;}
while keeping the CSS file attributes.
While I appreciate that there are plenty of other ways of doing this, is it correct to do it this way ?
This is fine. You can put declarations is as many different places as you like.
You can, yes. First off, the styles declared in the CSS file included on the page will be applied, then any other styles specified ad-hoc on the page will be applied on top of that.
That will work. Since CSS cascades it will inherit the styles as they go and add them to that class. That's why some sites change as the page loads.
First, to declare a paragraph tag, you wouldn't put a period before it. It should be:
p {padding:2px;}
Secondly, CSS is a cascading style sheet, therefore you can open an element declaration however many times you want. The style properties within it will take the last stated object. IE:
p {padding:2px; border:1px solid #000;}
and then later
p {padding:5px;}
Padding is now 5 px but it retains it's 1px border.
THAT IS BAD PRACTICE!!! I would sugest you to create "switch" class which will change some css attributes, rather than dinamicaly inject it later on the page. So later use it by adding it to element or remove
<style>
.p { margin:2px; }
.addition { padding: 2px; }
</style>
<p class="p">.....</p>
to switch to new style either with jquery on some ajax call or what ever you need.
<p class="p addition">....</p>
to switch off padding just remove "addition" class or "p" class if you want to switch off maring.
Cascading Style Sheets will inherit the styles and what you are doing is totally fine from a specification point of view but might not be considered best practice.
Also be aware of, that if you start overriding other styles the css hierarchy may apply: External > Internal > Inline.
for more information see http://nzwhost.com/article/understanding-css-hierarchy
I think the best way to do it is separate CSS declarations by logic.. layout together, colors together and specific medias (like screen, print) together.
If you want to make it to do it dynamically you can do something like that:
NOTE:
This is a PHP example.
<?php $back = 'image.jpg';
**something else can be executed ie conditionals and
more variables can be added**)
?>
<html>
<head>
<style type="text/css">
btn{
margin:0;
padding:0;
background-image: <?php $back; ?>
height:100px;
width:200px;
display:block;
}
</style>
</head>
<body>
<div>
<div class="btn">Test text</div>
</div>
</body>
</html>
You can add the predeclared variables or sets of the variables into CSS code using PHP. Note that CSS needs to be included in the HTML/PHP file you are working on. Lets say you want to randomly generate the background colour. PHP array (of ie '#CCC') > select values from the array randomly > add the variable into the CSS code. #
In your case you can specify two classes and then select one according to the condition in your dynamic code
<td class="blue">
Hi1
Hi2
Hi3
<div>Not Blue</div>
</td>
I want the class in the tag ("blue") to make Hi1,Hi2 and Hi3 blue.
So what should be the head of that class?
????
{
color:blue;
}
Using a descendant selector:
td.blue a {
color: blue;
}
Or if you only want it for immediate children, a child selector:
td.blue > a {
color: blue;
}
Reference material:
Selectors supported by most browsers: CSS 2.1
Newer selectors supported by some browsers and by various JavaScript libraries (for interacting with the DOM): CSS3 Selectors
Use the following. This means all a elements within any td element that has a class name of blue should be displayed in blue.
td.blue a {
color:blue;
}
However, you should note that semantically it is unwise to give your CSS classes style-specific names (like 'blue' or 'bold' or 'center') - if later you decided to change the colour to red, you would have to change all references to the blue class to red (potentially lots of work) or instead be left with really confusing class names that don't make sense.
Try naming the class after what the elements in question mean. So in this case, it might be td.links for example.
The CSS selector you need would reference both the blue class and the a tags beneath it.
.blue a {
color:blue;
}
Note that there is another syntax which you may also want to consider:
.blue>a {
color:blue;
}
note the > between .blue and a in this example. Both examples will work for your given HTML code, but this version more specific than the first, because it only affects <a> tags that are immediate children of blue. In other words, if you had an <a> tag inside the <div>, the first version would affect it, whereas this version wouldn't.
The downside is that IE6 doesn't support the > selector, so if you need to support IE6 users, you must use the first version. Fortunately, IE6 users are becoming fewer, but there are still a few of them out there.
One other thing: I'd also advise you to avoid using class names which refer to the actual colour. It's usually better to call it menulink, or something like that.
The reason for this? Imagine in the future you want to change your site a bit, freshen it up for a new version. Maybe new corporate colours afer a rebranding exersise. Whatever. You could do that without an change at all to your HTML code; just a CSS update:
.blue a {
color:red;
}
...but now your CSS doesn't make sense. If you'd called it menulink, you will always know what that class refers to, even if things change over time.
Try this.
td.blue a {
color: #0000FF;
}
This sets all a tags that are within a td tag with a class of blue.