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;
}
I want to build some CSS along these lines:
h1,h2,h3,h4,h5,h6 {some rule}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: inherit;}
h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {another rule;}
It would be useful if I could create a variable like this:
#headings: h1,h2,h3,h4,h5,h6;
and then maybe do something like this:
#{headings} {
& a {color: inherit;}
}
Unfortunately this gives me:
h1, h2, h3, h4, h5, h6 a {
color: inherit;
}
Is what I want possible? This is a simple version of what I want to do but I would also find useful for working with HTML input types and other instances of multiple selectors that often appear together.
Use a Ruleset
If you define your heading group as a ruleset with a mixin call to set properties with, then you can do this:
#headings: {h1,h2,h3,h4,h5,h6 {.setProps()}};
& {
.setProps() {
& {
some: rule;
}
a {
color: inherit;
}
span {
another: rule;
}
}
#headings();
}
I've isolated the whole thing inside & just so the .setProps() can be localized (it would work without it, but it would be setting the .setProps() globally. Also, the nested & {} bracketing is not necessary, but I find that it helps show what the "default" for the #headings is going to be.
This can be used sequentially, if desired, like so:
& {
.setProps() { some: rule; }
#headings();
}
& {
.setProps() { a {color: inherit;}}
#headings();
}
& {
.setProps() { span {another: rule;}}
#headings();
}
Both will output like so:
h1,
h2,
h3,
h4,
h5,
h6 {
some: rule;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
another: rule;
}
#1
Just yet one more solution in addition to #helderdarocha's answer and those given in https://stackoverflow.com/a/23954580/2712740. Maybe be this one could look a bit more clear:
// define header list as usual just
// put a mixin call with some predefined name there
h1, h2, h3, h4, h5, h6 {.headings}
// now to add styles/childs to the header list just add the mixin definitions:
.headings() {
some: rule;
}
.headings() {
a {color: inherit}
}
.headings() {
span {another: rule}
}
// etc.
The limitation of this solution is that h1, h2, h3 ... {} and .headings should be defined at the same level. Additionally, it's important to keep in mind that all these styles will output to CSS at the point of h1, h2, h3 ... {} definition not at the point of .headings definitions, so it may break your cascading overrides if you have some).
#2
The alt. solution I'm copy-pasting from https://stackoverflow.com/a/23954580/2712740 #3, basicaly it's the same as #1 but w/o its limitations (just having more special scary symbols):
// the "variable":
.headings(#-) {
h1, h2, h3, h4, h5, h6
{#-();}}
// usage:
.headings({
some: rule;
});
.headings({
a {color: inherit}
});
.headings({
span {another: rule}
});
//etc.
If you have these variables and selectors:
#headings: h1,h2,h3,h4,h5,h6;
#{headings} {
some-rule: rule;
}
.headings { // this is a placeholder
color: inherit;
}
h1 span {
other-rule: rule;
}
You can use this mixin to generate the code you want:
.mixin(#headings; #count) when (#count > 0) {
.mixin(#headings; #count - 1);
#heading: extract(#headings, #count);
#{heading}{
& a:extend(.headings) {}
& a:extend(h1 span) when not (#heading = h1) {}
}
}
Calling:
.mixin(#headings, length(#headings));
will generate:
h1, h2, h3, h4, h5, h6 {
some-rule: rule;
}
.headings,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
color: inherit;
}
h1 span,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
other-rule: rule;
}
I am trying to style all the headings in my header with a different font-family than the headings on the rest of the page but I am having trouble getting the style to only apply to the specific header ID.
Here is what I tried:
#header h1,h2,h3,h4 {
font-family:'Helvetica';
}
But this causes all h1/2/3/4 tags to use the Helvetica font regardless of if they are in the header div or not. I'm sure I am missing something simple, can anyone help? Thanks!
I think you must do so:
#header h1,#header h2, #header h3, #header h4 {
font-family:'Helvetica';
}
You need to target all hN with the ID.
#header h1,
#header h2,
#header h3,
#header h4 {
font-family:'Helvetica';
}
See Fiddle
I am using the following style:
h4 {
color: #ffffff;
}
h4 .name {
color: #cf3046;
}
I am using the following html
<h4 class="name">NAME</h4>
NAME is not changing color to #cf3046 but remains white. What am I doing wrong?
Thank you.
h4.name {
color: #cf3046;
}
There should be no space between h4 and .name, because they refer to the same element.
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.