I want to create an override chain with variables.
So as long as the variable for a specific headline isn't set it takes the one from above.
Example code would look like this:
:root{
--h1-font: "Rubik";
--h2-font: unset; /* <-- Inherit from h1 */
--h3-font: unset; /* <-- Inherit from h2 */
}
h1, h2, h3 {
font-family: var(--h1-font);
}
h2, h3 {
font-family: var(--h2-font);
}
h3 {
font-family: var(--h3-font);
}
Would the unset value invalidate the previously set one?
Related
is there a way to get the style from one element and apply it to another using only CSS?
h1 {
font-family: Courier New;
}
h2 {
font-family: h1.font-family;
}
You can maybe use css variables for this. Not exactly what you wanted but that works
:root {
--h1-font-family: Courier New;
}
h1 {
font-family: var(--h1-font-family);
}
h2 {
font-family: var(--h1-font-family);
}
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.
Using SCSS, I'd like to style all h3 elements that are of type .some-base, but it seems like I need to define the override in the derived styles. So
Doesn't work:
.some-base {
h3 {
margin-right: 3px;
}
}
.some-derived {
#extend .some-base;
}
Does work:
.some-base {
}
.some-derived {
#extend .some-base;
h3 {
margin-right: 3px;
}
}
Any way to get the first method to work so I don't need to redefine this in each override?
.some-base doesn't have any styles applied to itself. If you put color: red on .some-base in example 1, you'll see it inherited by .some-derived (note: it needs to go in .some-base, not .some-base h3).
It's not possible to extend nested classes though, so you can't extend .some-base and get the h3 styles defined inside it (100% sure on this one), nor can you extend .some-base h3 if it's defined as a nested class. If you define .some-base h3 {} as its own rule instead of .some-base { h3 {} } then you can extend it (95% sure on this one).
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.