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;
}
Related
Suppose to have this html:
<span>DOG</span>
I need to increase size of string "DOG"
So I use this css:
.hoverelement span:hover {
font-size:20px;
}
But this does not work? Can anyone help me?
You need to add !important in span's css, because it may be inherited by it's parent's rule.
.hoverelement span:hover {
font-size:20px !important;
}
<span>DOG</span>
Try to give the a-element the hover-selector.
a.hoverelement:hover span {
font-size: 20px;
}
Use this instead:
.hoverelement:hover span {
font-size: 20px;
}
In CSS, I want something like:
:root{
underline-all-h1-tags:true
}
/* it's not all h1 tags, it's actually h1-tags-with-a-bunch-of-other-things".
But for KISS reasons, we'll assume it's just all of them.*/
/* ... lots and lots of other stuff...*/
h1{
if(underline-all-h1-tags == true){
text-decoration: underline
} else {
text-decoration:none
}
}
Is there a way to do this? I know I could just do
:root{h1-underline:underline}
h1{text-decoration:var(h1-underline)}
But I am trying to make my code readable to me-in-10-years-when-I-have-totally-forgotten-how-to-CSS.
why not make use of the cascading part of cascading style sheet?
h1{
text-decoration:none;
}
.underline h1{
text-decoration:underline;
}
Applying the class "underline" to any parent element would do the same thing that it looks like you're trying to describe above.
You could add or remove the underline class with js, or set it statically on elements you want affected.
As an alternative to Kai's answer:
h1 { text-decoration: none; }
.underline { text-decoration: underline; }
.underline is a utility class that can be used to add an underline to any element you want, including an h1. This becomes extremely scalable.
Of course I personally wouldn't name it .underline; I would probably name it something like
.u-td_u (which stands for "utility, text-decoration, underline"). The naming is your choice.
And just for kicks you could also have the other utilities available:
.u-td_n { text-decoration: none; }
.u-td_i { text-decoration: inherit; }
.u-td_o { text-decoration: overline; }
.u-td_l { text-decoration: line-through; }
/* etc ... */
My css is structured in components, each component is stand-alone.
example:
.menu {
background: black;
}
The framework I'm using sometimes adds a class to the body-tag. For example for logged in users it would look like this:
<body class="loggedIn">
<div class="menu"</div>
</body
I would like to keep the css structured inside each component. Is it possible to add a selector in less that is added before the parent? Something like:
.menu{
%loggedIn{
color: red
}
}
should give loggedIn users a red menu.
Unless I am completely missunderstanding you, and there is a possibility, then the ampersand-parent-selector is exactly what you need!
.menu{
.loggedIn & {
color: red
}
}
Should result in
.loggedIn .menu {
color: red
}
You can reference the parent selector using &: http://lesscss.org/features/#parent-selectors-feature
LESS
.menu {
background: black;
.loggedIn & {
color: red
}
}
Will compile to CSS
.menu {
background: black;
}
.loggedIn .menu {
color: red
}
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.
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.