My code is
.simple-text h2 {color:red;}
.simple-text h3 {color:red;}
.simple-text h4 {color:red;}
<div class="simple-text">
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
</div>
How to write short css?
.simple-text h1,h2,h3 {color:red;}
Don't work
I need all Headers in DIV with class "simple-text" were red
With plain CSS you're limited to:
.simple-text h1,
.simple-text h2,
.simple-text h3 {
color: red;
}
<div class="simple-text">
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
</div>
Are you tried this ?
.simple-text h1,.simple-text h2,.simple-text h3 {color:red;}
I'm afraid there's no "short" way to do this in plain CSS. I would suggest you check out LESS though. It's a CSS Preprocessor that adds just this kind of thing. In LESS you can do the following:
.simple-text
{
h1,h2,h3,h4,h5,h6
{
color:red;
}
}
There's also lots more in LESS. There are other preprocessors like SASS, too. I recommend doing your homework, they can save you lots of time.
move the headers within the .simple-text css class
.simple-text {
h1, h2, h3 {
color: red;
}
}
EDIT: I misread the question. This is SASS.
Related
I have some code that I think may be bulky and could be simplified. I haven't found anything that helps in my situation. I am trying to make it so that when I hover over a div, an h2 and p get underlined. It works fine like this:
.test:hover h2, .test:hover p {
text-decoration: underline;
}
But I was wondering if I could simplify it in some way, not having to repeat .test:hover twice.
If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:
.test:hover :is(h2, p) {
text-decoration: underline;
}
<div class="test">
<h1>An H1</h1>
<h2>An H2</h2>
<p>A paragraph</p>
</div>
An alternative would be to leverage a CSS preprocessor like Sass or Less, both of which support nesting which can make for DRY-er, more expressive style source code. This may be overkill in your case, though. Here's an example in Sass' SCSS format:
.test:hover {
h2, p {
text-decoration: underline;
}
}
There is a new pseudo-class :is which will allow this..
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
.test:hover :is(h2, p) {
color: red;
text-decoration: underline;
}
<div class="test">
<h2>Heading</h2>
</div>
<div class="test">
<p>Lorem ipsum dolor sit amet.</p>
</div>
You can use it:
:is(h1, p) .test:hover {
text-decoration: underline;
}
I have some code that I think may be bulky and could be simplified. I haven't found anything that helps in my situation. I am trying to make it so that when I hover over a div, an h2 and p get underlined. It works fine like this:
.test:hover h2, .test:hover p {
text-decoration: underline;
}
But I was wondering if I could simplify it in some way, not having to repeat .test:hover twice.
If you don't need to support Internet Explorer this can be accomplished with the :is pseudo-class:
.test:hover :is(h2, p) {
text-decoration: underline;
}
<div class="test">
<h1>An H1</h1>
<h2>An H2</h2>
<p>A paragraph</p>
</div>
An alternative would be to leverage a CSS preprocessor like Sass or Less, both of which support nesting which can make for DRY-er, more expressive style source code. This may be overkill in your case, though. Here's an example in Sass' SCSS format:
.test:hover {
h2, p {
text-decoration: underline;
}
}
There is a new pseudo-class :is which will allow this..
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list.
.test:hover :is(h2, p) {
color: red;
text-decoration: underline;
}
<div class="test">
<h2>Heading</h2>
</div>
<div class="test">
<p>Lorem ipsum dolor sit amet.</p>
</div>
You can use it:
:is(h1, p) .test:hover {
text-decoration: underline;
}
I'm looking for a neat way to solve the given problem:
Let's say we have an article, and I want to style every h1, h2 in unless they are located in the <div ="example">
<article class="article">
<h1>Direct Child 1</h1>
<h2>Direct Child 2</h2>
<div class="example">
<h1>Example Child 1</h1>
<h2>Example Child 2</h2>
</div>
<div class="other-div">
<h1>Indirect Child 1</h1>
<h2>Indirect Child 2</h2>
</div>
</div>
Now in pure CSS the solution is simple:
.article > h1,
.article *:not(.example) h1 {
color: red;
}
.article > h2,
.article *:not(.example) h2 {
color: blue;
}
All h1s are red, and h2s are blue, unless they're within <div class=example>" - Pen
In LESS, however, I can't find a clean way to do this.
.article {
& :not(.example) {
h1 {
color: red;
}
h2 {
color: blue;
}
}
}
I'm looking for a way to add <div class=article>" direct child h1s and h2 into the mix while keeping it DRY.
I guess the main show-stopper for your attempt is the limitation of Less requiring a selector combinator (like >) to always go before a selector element (so neither & > nor > alone can work).
There's workaround however:
.article {
#-: ~'>';
#{-}, *:not(.example) {
h1 {color: red}
h2 {color: blue}
}
}
I know many inheritance questions have been asked, but each case is unique and I'm having trouble with this one.
I have some h2 elements that need to have unique styling to them but they keep inheriting properties from previously defined h2 elements.
I've tried giving them a unique class, I've tried defining css properties through JS and Jquery, nothing's working.
Here's an example of what I'm talking about:
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2>New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
Even with giving the child's h2 tag a unique class I get nowhere.
<div class="parent">
<h2>Original H2</h2>
<div class="child">
<h2 class="newh2class">New H2</h2>
</div>
</div>
.parent h2 {
font-weight:bold;
color:red;
}
.child h2.newh2class {
font-weight:normal;
color:green;
}
<!--or-->
h2.newh2class {
font-weight:normal;
color:green;
}
Can anyone help out?
you need to use !important value to make it so.
h2.newh2class {
font-weight:normal;
color:green !important;
}
You css should look like this
.parent > h2 {
font-weight:bold;
color:red;
}
.child h2 {
font-weight:normal;
color:green;
}
check it here http://jsfiddle.net/yNFUd/
Your issue is CSS because of how your are referencing the element. Read about stacking and precedence in CSS
http://jsfiddle.net/feitla/SmUGm/2/
.parent > h2 {
font-weight:bold;
color:red;
}
.parent .child h2 {
color:blue;
}
.child > h2 {
font-weight:normal;
color:green;
}
Changing the order and how they are called will affect how they are inherited and calculated.
I am wondering how i would be able to style links inside a given div with a given class like
.navigation-div : a:link,a:visited {
color:red;
}
Some html
<div class="navigation-div">
Home
List
Download
Files Used
Documentation
</div>
<div class="client-header">
<h1>CRUD Application</h1>
</div>
Is there a selector for this kind of thing?.
.navigation-div a:link, .navigation-div a:visited {
color:red;
}
jsFiddle example