In my style sheet, I have overridden the style of H1 and H2 with the following code:
And in my HTML, I have applied that style to a DIV that contains an H1 tag.
However, this style is also applying to H1 and H2 tags AFTER the div in question.
Replicated here: http://jsfiddle.net/89gkQ/1/
Why is the style applying outside of the div where it's applied, and how do I stop it?
In CSS, the comma doesn't work like it does in English:
.featuredtitle h1, h2 {
color: red;
}
That code is equivalent to this code:
.featuredtitle h1 {
color: red;
}
h2 {
color: red;
}
Which isn't what you want. The comma just allows you to write multiple selectors, so you want to be a bit more verbose:
.featuredtitle h1, .featuredtitle h2 {
color: red;
}
Demo: http://jsfiddle.net/89gkQ/2/
The problem is here:
.featuredtitle h1,h2 {
font-size: 1.5em;
font-weight:bold;
color:#a00;
}
You should write the following instead:
.featuredtitle h1, .featuredtitle h2 {
font-size: 1.5em;
font-weight:bold;
color:#a00;
}
The comma starts a new selector, which in this case made the style apply to all H2 tags, regardless of where they are.
Related
I've got this situation I think is weird, where
a:hover {
color: #FD5454;
}
doesn't work, but
#feed h3 a:hover {
color: #FD5454;
}
does. It has been some time since I used CSS extensively, so I have no idea why. Could someone please explain this to me? It surely must be a stupid question, but I just couldn't figure it out myself. Thank you in advance!
EDIT:
Here's the code it is affecting at the moment:
<div id="feed">
<h2>Follow us on instagram</h2>
<h3>#johndoe</h3>
</div>
And here are the complete style rules:
a:link {
text-decoration: none;
color: white;
}
#feed {
text-align: center;
background: url("../img/Feed_bg.jpg") center no-repeat;
height: 100vh;
}
#feed h2 {
color: #789199;
padding-top: 5vh;
}
#feed h3 a {
text-decoration: none;
font-family: "Lato Light";
color: white;
}
/* This is working */
#feed h3 a:hover {
color: #FD5454;
}
/* This is not */
a:hover {
color: #FD5454;
}
This is a case of CSS specificity. Here, your a:hover selector isn't specific enough to override the #feed h3 a rule. As MDN notes:
The following list of selector types is by increasing specificity:
Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
And as you discovered, by adding #feed in front of your hover selector (#feed a:hover) increases the specificity to override the other selector.
jsFiddle example
There are many CSS specificity calculators available online and you can see that a:hover has a specificity of 0011, while #feed a:hover has 0111.
I have an H1 inside an article element.
My h1 is styled something like this:
h1 {
&:extend(.display1);
border-bottom:solid 0.1rem #divider;
color:#primaryText;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
However, I only want to apply this styling when the H1 isn't inside an article. I thought it would be a simple addition to the CSS like this:
*:not(article) h1 {
}
However, this doesn't seem to work for me and I've been left scratching my head. Is it possible? Have I got the syntax right? Is there something else lurking in the CSS?
Any help appreciated.
Yes, you can use this:
h1 {
color:blue;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
:not(article) > h1{
color: green
}
http://codepen.io/anon/pen/zvKKqE?editors=110
Have you tried the 'old fashioned way'?
.article h1{ /* insert styling for h1 inside article */ }
h1 { /* insert styling for h1 outside article */}
Please note that .article h1 takes all elements from h1. So make sure you override the different styles (e.g. with !important).
--EDIT--
If you want to use :not() I can't see something wrong with your lines of code.
How does the HTML looks like? I got this example in JSFiddle:
https://jsfiddle.net/2aruu0Lr/1/
It doesn't work if there is no parent tag for h1, it does if there is one like a <span> or in my case a <strong>
Hope this helps you!
Solution:
body *:not(article) h1
Does this the trick for you?
#primaryText: #000000;
#divider: lime;
.display1 {
padding: 15px;
}
h1 {
&:extend(.display1);
:not(article) > & {
border-bottom:solid 0.1rem #divider;
color:#primaryText;
margin-bottom:2.4rem;
padding-bottom:0.7rem;
}
}
Output:
.display1,
h1 {
padding: 15px;
}
:not(article) > h1 {
border-bottom: solid 0.1rem lime;
color: #000000;
margin-bottom: 2.4rem;
padding-bottom: 0.7rem;
}
Is there a way to simplyfy this:
div.container>table>tbody>tr>td h1,
div.container>table>tbody>tr>td h2,
div.container>table>tbody>tr>td h3{
color: red;
}
to get something like this?
div.container>table>tbody>tr>td (h1, h2, h3){
color: red;
}
Thank you in advance.
possible with SASS
demo - http://jsfiddle.net/063e4x7g/1/
.container tr td {
h1, h2, h3 {
color:red;
}
}
Comma separated is the only way,
but there is another option which will select all the parent`s childs:
div.container>table>tbody>tr>td>* {
color: red;
}
however i do not recommend using this.
table h1,
table h2,
table h3 {
color: red;
}
check out fiddle at http://jsfiddle.net/g158jr8v/
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.
I have a ccs sheet with the usual tags
a. {}
a.hover {}
I also have a div=id "footer" that I want to change the font style but the global a. and a.hover are overriding it even when I add a
#footer{
color: #333333
}
Can I override using this or do I need to try? a.#footer or a.hover:#footer
Basically the #footer as is wont work because of the a. mentioned above even though the other elements are working in the #footer div such as margin...just the font color and hover??
Can someone tell me how to style this and not let the global a. interfere with it?
Many thanks
It's all about the hierarchy of code:
HTML:
<div>
Sample link
<div id="footer">
Footer link
</div>
</div>
CSS:
a {
color: #ebebeb;
}
a:hover {
color: #000;
}
#footer a {
color: #3e3e3e;
}
#footer a:hover {
color: #609;
}
Try this piece of code
#footer a,
#footer a:hover{
color:#333;
}
what is dot after a ?
the correct form is a {} , a:hover {} , a#footer and a:hover #footer
If you are nesting a inside div element you need to use
#footer a {
color: #333333;
}
If you only use #footer {} it will apply the styles to div and a won't inherit the color, so you can also write
#footer {
color: #f00;
}
#footer a {
color: inherit;
}
This is a matter of specificity. Styling the <a> elements directly is more specific then just applying some CSS to the <div id="footer"> element and all of its children. You can target any links within your footer by using
#footer a {
color: #333;
}
Due to the descendant selector this rule itself is more specific than the one you're using for all the other <a> elements outside of the footer.