Please may someone explain why the text 'impact on market' is green as opposed to yellow?
I was expecting this to be yellow
HTML
<div>
<h4> International news </h4>
<article>
<h4 class= "headline"> news develop</h4>
<aside>
<h4> impact on market </h4>
</aside>
</article>
</div>
CSS
h4 {
color:blue;
}
.headline {
color:red;
}
article {
color:black;
font-style:normal;
}
aside h4 {
font-style: italic !important;
color yellow;
}
article h4 {
font-style:normal;
color: green;
}
It is because article h4 comes after aside h4 and their degree of specificity are equal. CSS files are processed from top to bottom and if another style comes along with an equal or greater specificity, then that will override the previous style.
You can use this:
side > h4 {
font-style: italic !important;
color yellow;
}
article > h4 {
font-style:normal;
color: green;
}
Where > means only affect direct descendants. This is typically better to use than !important, since !important is considered the very last resort.
Further reading on CSS specificity:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
http://css-tricks.com/specifics-on-css-specificity/
Further reading on !important:
http://css-tricks.com/when-using-important-is-the-right-choice/
The order in which you put them. The last one is the one written last, so therefore more important.
Try:
article aside h4
{
font-style: italic !important;
color: yellow;
}
Specify the structure more.
Alternative, create a class.
<h4 class="level3"> impact on market </h4>
Then add
.level3
{
color: yellow;
}
It is all about CSS weights, here
article h4
is overriding
aside h4
you can change order or edit the
aside h4
for
article aside h4
and it will work. Both will work, change order or edit the selector.
Related
Here's the offending css:
ul.pricing-table span {
display:block;
font-size:40px;
font-weight:bold;
color:#222;
padding:30px 0;
line-height:1.3;
}
I attemped to fix it with:
<style>
.spans {
display:inline;
font-size:14px;
font-weight:normal;
padding: 0 0;
line-height:1;
}
</style>
Where the span looks like:
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
No matter where I put the style block, before the link or after it still uses the style from the file. I thought that what I put in style blocks in the html overrode linked files. Obviously not.
I also tried various schemes of "initial" "revert" "set" none of which had any effect and most gave me errors.
First of all you don't provide the full HTML code, the issue isn't reproducible, so we need to make some assumptions. It's not about where you put your style block, what matters is selector specifity. When you select element with ul.pricing-table span selector, you select the <span> within the <ul> with pricing-table class. When you use .spans you select any element with class .spans, so the latter has lower specifity. Try something like ul.pricing-table span.spans instead of .spans and read this to deeper understand the point https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#:~:text=Specificity%20is%20the%20means%20by,different%20sorts%20of%20CSS%20selectors To quickly compare selector specifity you may want to use something like this https://specificity.keegan.st/
ul.pricing-table span {
display: block;
font-size: 40px;
font-weight: bold;
color: #222;
padding: 30px 0;
line-height: 1.3;
}
ul.pricing-table span.spans {
display: inline;
font-size: 14px;
font-weight: normal;
padding: 0 0;
line-height: 1;
}
<ul class="pricing-table">
<li>
<p>This is more of a test <span class="spans" style="color: #e03e2d;">do red</span> and <span class="spans" style="color: #34495e;">do black</span></p>
</li>
</ul>
This is a CSS specificity issue. Your selector (.spans) is composed of one class when the selector from the file (ul.pricing-table span) is composed of one class plus 2 elements. Unless you use !important which you shouldn't, where ever you put your CSS the "stronger" selector will always prevail. As an example you could change your selector to p > span.spans
I want to apply:
.page-item-124 a {
font-size: 15px !important;
font-weight: bold;
}
to all page items (classes starting with page-item) there are.
How can I do that?
You can use CSS3 [attribute*=value] Selector like this
Demo: https://jsfiddle.net/2Lzo9vfc/180/
HTML
<div class="page-item-1">Lorem ipsum</div>
<div class="page-item-2">Lorem ipsum</div>
CSS
div[class*="page-item"] {
color: blue;
font-size: 15px;
}
You can use the starts with (^=) or wildcard (*=) attribute selector for that:
[class=^page-item] { font-size: 15px !important; font-weight: bold; }
This will select among others these elements:
<p class="page-item-123"></p>
<section class="page-item-intro"></section>
You might want to narrow it down a bit. Eg only select div elements.
div[class^=page-item] { ... }
See also selector documentation and the fiddle demo
<p class="butonat">
<span class="color1">Learn More </span>
I tried the following css but didn't work:
CSS (added from comment post by OP):
.butonat a.color1 {
font-size:16px;
font-family:'Source Sans Pro', FontAwesome, sans-serif;
font-weight:normal;
text-decoration:none;
text-align:center;
color:#fff;
}
There is a lot of different ways accessing your link via DOM.
Here is couple of code snippets, how you can do it.
.color1 {
color: red;
}
a span.color1 {
font-size: 30px;
}
<p class="butonat">
<span class="color1">Learn More </span>
Your CSS:
.butonat > a {
color:green;
text-decoration:none;
}
.butonat > a:hover {
color:red;
text-decoration:underline;
}
<p class="butonat">
<span class="color1">Learn More </span>
</p>
Use the above way to add the CSS on anchor tag. This way is used to apply the same CSS on a block of class.
You can apply more properties on it also.
UPDATE:
As post the CSS in question:
You need to give the space between a and class name:
.butonat a .color1 {
^^ here need space
Reason: you have not given the space to it is considering that class name is in anchor tag. After giving the space it will consider that class name is in the adjacent tag. so you need to give the space.
EDIT:
After you sent your css, i can see a missing SPACE in your selector:
.buttonat a.color1 this would mean that your a-tag has the class color1
change to
.buttonat a .color1 this will select the children witch class color1 in your a tag
I have the following html5 code. I expected the style for the text Business Ads to be italic and color in yellow. But it comes in red.
Can only certain styles be applied to the aside element?
CSS:
aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
HTML:
<div>
<article>
<aside>
<h4>Business Ads</h4>
</aside>
</article>
</div>
This is a result of the way CSS specificity works. The page here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
provides a good explanation. In this case, since both style declarations refer to an h1 within a larger element, they have equal specificity, and the latest declared style takes precedence. You can override this with !important, but it's usually considered bad style because it breaks the "cascading" nature of CSS. Instead, use a more specific selector:
article aside h1 {
//style goes here
}
You override the rules the way you have set your CSS. Both rules target same element, so the second one will override the first one and apply to the element.
For example if you set the oppossite order to your rules like this :
article h4 {
font-style: normal;
color: red;
}
aside h4 {
font-style: italic !important;
color: yellow;
}
the second one will aply and h4 will be yellow an italic
So if you have an h4 also inside article you can use this:
article aside h4 {
font-style: italic !important;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
DEMO
You must be more specific with the selector so that the rule it is assigned to overrides the "default" one. You can the remove the !important which isn't the best way to override existing rules when you can use other techniques.
DEMO
article aside h4 {
font-style: italic;
color: yellow;
}
article h4 {
font-style: normal;
color: red;
}
You're targeting the same h4 element but you gave it with different styles
and the last one was read. Just delete
article h4 {
font-style: normal;
color: red;
}
and remove the !important in the first selector.
And if you're targeting different h4 tags inside an article or aside tag, what you can do is put classes or span on them.
In the below example link 2 comes out white and not black as expected how can I style the color of link two without wrapping it in a container tag?
.text a{
color:#FFF;
}
.black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Your second selector needs to be more specific than the first one to override it:
.text a {
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
It comes out white because the previous selector has higher specificity. One solution in this:
.black{
color:#000 !important;
}
This can cause complex problems if you use it too much, however. Generally the best solution is to try and avoid too many selectors. Have one selector that sets a default style for links, then only use classes to change specific links. For example:
a {
color: #fff;
}
.black {
color: #000;
}
It turns out white because the first selector is much more specific, namely: get a link in an element that has a class "text", whereas the last is merely get any element with the class "black".
You can solve this in two ways:
.text a.black {
color:#000;
}
OR
.black{
color:#000 !important;
}
In which 'important' overwrites other rules that are give to elements with the class "black".
here is working solution you just apply the style to black with id rather than class:
.text a{
color:#FFF;
}
#black{
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
As others have mentioned, it comes out white because your previous selector for "a" tags is more specific than your "black" class.
There are two options here:
Be more specific:
.text a{
color:#FFF;
}
.text a.black {
color:#000;
}
<div class="text">
Link 1
Link 2
</div>
Or, you could us the "!important" rule:
.text a{
color:#FFF;
}
.black{
color:#000!important;
}
<div class="text">
Link 1
Link 2
</div>
I would strongly advise the first approach, but in some situations, "!important" can be a quick fix until you figure out where the real problem lies. Don't abuse the "!important" rule because it'll mess you up for the future - trust me on that!
Hope this answers your question. Have a good day.
Michael.