I'm wondering how can I apply a style to EVERY h2 that DOES have ANY any class attached to it, thus having the effect that the style will NOT be applied on a plain h2..eg..
<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>
All the ones with a class should have a style - and just plain h2 should not, (This is a huge site with hundreds of styles)...so any easy way to do this?
There is a method to do it but it's only possible with browsers that support CSS3 :not pseudo class.
h2[class] {
/* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
/* Styles for <h2> without classes */
}
I hope it works!
[Edit] I've made a simple demo for you here - http://jsfiddle.net/fL2sT/
What you're asking for is how CSS works by default.
The correct way to style elements which have no specific class assigned to them is to style the base element, as Ahsan demonstrated above. I don't know why he got downvoted.
h2 { property: value; }
Note that if H2 elements do have classes assigned to them, then that styling may override your base style.
So if you have: h2 { color:#333; font-size:2em; } as your base style, and then apply class="myClass" to it where: .class { color: #000; }, then the base style's color will be overriden (but not the font size). This is the cascade in Cascading Style Sheets.
Another way is to target them conditionally:
div#nav h2:first-child { property:value; }
which gives you contextual control, but again, class assignment will always override base styling, and may also override context targeting if the class application has higher specificity.
Why not simply use
h2[class] { ... }
Related
how do you apply a specific css to second-page
HTML
<div className = "section-header second-page">SOME MESSAGE</div>
Assuming the above:
CSS
.section-header {
background-color: black,
}
i want to apply a different background color specifically to second-page that does not modify section-header.
If you want the styling to apply to any element with .second-page class you should use:
.second-page {
backgound-color: red,
}
If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:
.section-header.second-page {
backgound-color: red,
}
When there's no space between two classes, it means it refers to an element with both classes.
For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp
Your HTML should be:
<div class="section-header second-page">SOME MESSAGE</div>
Your CSS could be:
.second-page {
background-color: black,
}
You can mix multiple classes within the HTML or target them separately.
If you need to validate your HTML code you can use this free service:
https://validator.w3.org/#validate_by_input
I have two classes, one is used specifically fro certain tags, the other can be used on any tag:
a.action_link_2 {
display:inline-block;
}
.display_none {
display:none;
}
In some circumstances I want to apply both these styles and have tried this:
<a class="action_link display_none">content</a>
However, when rendered in the browser, the 'action_link' class take precedence. I understand that this might be to do with CSS class priority, i.e. tag-specific classes taking precedence. My question is how do I make this tag hidden using these classes and still allow the 'display_none' class to be used on any element to hide it?
you could just remove the a from before the class, and also add body before the display none class to give it a higher priority.
.action_link_2 {
display:inline-block;
}
body .display_none {
display:none;
}
You are right, it because specificity read this
To overcome the problem, you need to increase the specificity for
.display_none class when it is present on action_link_2 .
Just add one more rule, just below all of it
a.display_none {
display:none;
}
This will work , but there will be a problem when you try to add class
.display_none to an anchor, but there is no .action_link_2 class
present.
So the final and best solution would be to use:
.action_link_2.display_none {
display:none;
}
You could try this:
.display_none { display:none !important; }
I have a class in my css called .btn:
.btn {
//stuff here
}
and I am going to create another class, lets say .btn2. I want to be able to inherit the characteristics from .btn into btn2, as I only want to change the color of button 2. Is there a way in CSS for this? Or should I just copy and paste the original stuff into the new class?
I'd suggest:
/* comma-separated selectors: */
.btn,
.btn2 {
/* shared properties */
}
.btn2 {
/* properties unique to btn2 */
}
JS Fiddle demo.
You can do it with dynamic stylesheets. Check out LESS or SASS.
EDIT:
Some additional info at a commenter's request. Here are the official sites. They both have examples on their home pages.
http://lesscss.org/
http://sass-lang.com/
What you can do is this
.btn, .btn2 {
/* Styles goes here */
}
This way, both the classes will share common properties defined in the rule block.
As far as the inheritance goes, something you would like to have..
.btn2 {
.btn; /* Won't work in pure CSS */
}
Won't work in pure CSS, you need to take a look at SASS or LESS
I'm working on some CSS from a tutorial, a div has this class:
<div class="related products">
How can I reference it in the stylesheet?
The div actually has two classes, related and products. You can reference it in your stylesheet with either .related or .products, and it will pick up the styles from both of those rules. For example, with the following CSS, the text in the div in your question would appear red with font size 12:
.related { color:#ff0000 }
.products { font-size:12px }
If you want to select elements with both classes, use .related.products in your stylesheet. For example, add the following to the above example:
.related.products { font-weight:bold }
And the text in your div will receive all three rules, because it matches all 3 selectors. Here's a working example.
div.related.products is the general method
You reference it by div.related.products which literaly translates to "a div with class of related and class of products".
Or, you could reference it by using either class names, since it will catch both.
jsFiddle Example.
In the css, just put the name class of the div by doing this:
.related products {
/*styling to go here*/
}
Now any styling within the related products class will be applied to that div.
I have a webpage that is generated by Drupal and it comes with a certain stylesheet attached to it.
I would like to override one of the styles. It is set with a class like this:
<div class="description"></div>
So instead of using the ".description" style that comes with the Drupal CSS, I would like the page to use my ".description" style. In other words - if the page has 2 ".description" styles, how do I tell the page to use mine?
Use a selector with higher specificity:
div.description {
/* will take precedence over just .description */
}
Place your stylesheet after the one you want to override:
/* Drupal's style */
.description {
foo: bar;
}
/* Your style */
.description {
foo: baz; /* takes precedence over foo: bar */
}
Do not use !important. Just don't.
See also CSS 3: Calculating Selector Specificity.