I have multiple classes like this with same property:
.class1 > div{
background-color: red;
}
I try to reduce the CSS code with:
.class1, .class2, .class3 > div{
background-color: red;
}
But it doesn't work properly, it only takes the last class in this case .class3.
Is there a way to properly do this?
If you want the child div selected for each of the classes, you'll need to specify it with the selector for each class like so:
CSS
.class1 > div, .class2 > div, .class3 > div {
background-color: red !important;
}
Single Selector (Wrong)
Selector For Each Class (Right)
You will be able to use :matches pseudo-class in CSS Selectors Level 4.
:matches(.class1, .class2, .class3) > div {
...
}
It only works in certain browsers at the moment, e.g. latest Apple Safari.
For now, you will have to use the old syntax, :any with their respective prefix in Firefox and Chrome. Not supported in IE and Edge.
:-moz-any(.class1, .class2, .class3) > div { ... }
:-webkit-any(.class1, .class2, .class3) > div { ... }
:-moz-any(.class1, .class2, .class3) > div {
background: aqua;
}
:-webkit-any(.class1, .class2, .class3) > div {
background: aqua;
}
:matches(.class1, .class2, .class3) > div {
background: aqua;
}
<div class="class1"><div>1</div></div>
<div class="class2"><div>2</div></div>
<div class="class3"><div>3</div></div>
<div class="class4"><div>4</div></div>
<div class="class5"><div>5</div></div>
Hopefully, the standard :matches will be available in all the major browsers in the near future. Other than that, please write the whole selectors for each one and separate them with commas:
.class1 > div,
.class2 > div,
.class3 > div {
...
}
References:
4.2. The Matches-Any Pseudo-class: :matches()
Complex CSS Selectors Inside Selectors
Can I use :matches() CSS pseudo-class
Related
I have an element with id. I try to choose some of its children via CSS selectors. #myDiv span, #myDiv i works but I wonder if there is a shorter way for this.
I've tried nested selectors like
#myDiv {
& span, i {
color: red
}
}
but didn't work.
#myDiv span, #myDiv i {
color: red
}
<div id="myDiv">
<span>My Span</span>
<p>My P</p>
<i>My I</i>
</div>
Your nested code is in SCSS not in CSS, and there is no nesting in CSS.
The shortest CSS code if you will not add any another elements under this container in future will be
#myDiv *:not(p) {
color: red
}
If you want it to be recursive (let's say, in the future, some #myDiv elements will have their own child elements), use:
#myDiv > *:not(p) {
color: red
}
You can like this:
#myDiv {
& span, & i {
color: red
}
}
it seems that you forgot to put "&" before every new class selector.
Is there a way to get the below to work?
.class1 {
line-height:20px;
}
.class2 {
height: class1.line-height;
}
I know that css variables would be the way to go but since it is in experimental phase, it would not be a suitable for our project. Is there any other way?
You can't really use dependencies like that in CSS without a preprocessor such as SASS or LESS. But you can apply more than one class to the HTML.....
<div class="class1 class2"></div>
In this case, class1 would contain the line-height, then class2 would contain any other properties you want to apply to that particular div.
Any similar properties between class1 and class2 would allow class2 to take precedence, since it's loaded after class 1, assuming the CSS hierarchy is logical.
For example:
.class1 { line-height: 1.3; background-color: red;}
.class2 { background-color: blue; }
The div would have a line-height of 1.3x and a background color of blue.
yeah.. you can't use dependencies like that in CSS.
you have to use SASS or LESS..
you can do like this in SASS
.class1 {
line-height:20px;
}
.class2 {
#extend.class1
}
Five years later...
I know that css variables would be the way to go but since it is in experimental phase, it would not be a suitable for our project.
As it's 2021 (and no-one is using Internet Explorer 11 anymore, phew, and all the major browsers fully support CSS Variables CSS Custom Properties) so you can now use var().
If you simply want to only define 20px once to avoid repeating yourself in CSS, then set a custom-property on a common ancestor of both .class1 and .class2 elements: most people use html (or html:root or just :root) for this:
:root {
--my-height: 20px;
}
.class1 {
line-height: var(--my-height);
}
.class2 {
height: var(--my-height);
}
Now, if you want .class2 elements to "inherit" their height: from any ancestor class1 elements instead of <html>, then this should work:
:root {
--my-height: 50px; /* Default value for .class2 elements which are not descendants of .class1` */
}
.class1 {
--my-height: 20px; /* Redefining the value */
line-height: var(--my-height);
}
.class2 {
height: var(--my-height);
}
...or if you want only .class2 descendants of .class1 to use the value:
:root {
}
.class1 {
--my-height: 20px;
line-height: var(--my-height);
}
.class1 .class2 {
height: var(--my-height);
}
But you probably shouldn't be setting line-height anyway - doing-so is a sign that you're misusing display: inline; or vertical-align:;.
I have the following markup:
<div class="ctr-1">
<h3>Title</h3>
<div class="ctr-2">
<h3>Title</h3>
</div>
</div>
And the following CSS
.ctr-1 h3:first-child{ display:none; }
Both <h3> tags are hidden, I only want the first one hidden. How?
This is what the first-of-type and nth-of-type selectors are for.
For example:
.ctr-1 h3:first-of-type { display:none; }
/* - Or - */
.ctr-1 h3:nth-of-type(0) { display:none; }
This would hide the first h3 descendant of .ctr-1, regardless of its location inside the parent element.
Granted, in your specific example, the h3 is indeed also the immediate (>) and first (:first-child) descendant of .ctr-1 . But if this is a coincidence, you might not be able rely on it. In that case, nth-of-type is the way to go.
You have a few different options:
Use the :first-of-type pseudo class to select the first element of type:
.ctr-1 > h3:first-of-type {
display: none;
}
Or use the :nth-of-type(n) pseudo class and specify the index of the first element:
.ctr-1 > h3:nth-of-type(0) {
display: none;
}
If type doesn't matter, and you always want to select the first child, use the :first-child pseudo class:
.ctr-1 > h3:first-child {
display: none;
}
They are both technically the first-child.
In your example, you could do:
.ctr-1 > h3:first-child { display:none; }
You have wrong, ctr doesn't exist, and you need to tell with > to select the first element level in your page selector try this:
.ctr-1 > h3:first-child{ display:none; }
You can use:
.ctr-1 > h3 { display: none; }
I am having trouble finding the correct CSS selector, the structure I have looks like this:
<div>
</div>
<div>
</div>
<div>
</div>
I would like to style the a element of the first div
I have tried with this selector but with no luck
div:first-child a{}
first-child should work absolutely well, you can try
div:nth-of-type(1) a { /* Or div:first-child a */
color: red;
}
The above selector will select all 1st div element and will apply color to all a which are inside 1st div
Demo
If you are willing to style 1st occurrence of a in every div tag than you need to use
div a:nth-of-type(1) { /* Or div a:first-child */
color: red;
}
Here every 1st a will be selected in every div tag
Last but not the least if you want to select 1st a only in 1st div than use the below selector
div:nth-of-type(1) a:nth-of-type(1) { /* Or div:first-child a:first-child */
color: red;
}
Note: If still the above selectors doesn't work, than the possibility
is either some rule is more specific than the rules you are declaring,
or !important is used somewhere, or (least chances) you are testing
on older browsers
Your own example is working too.
http://jsfiddle.net/7Pea3/
div:first-child a {
color: #f00;
}
The first div will be selected and all a recive the color #CCC. I don't understand why this isn't working.
div:first-child a {
color: #CCC;
}
Else test this solution, that selects the first div and styles the first a tag in the div:
div:first-child a:first-child(1) {
color: #CCC;
}
Else you have problems with the :first-child selector use the :nth-of-type({ number expression | odd | even }) selector.
I have a structure:
<div id="div">
<ul class="ul">
<li class="li_one">
</li>
<li class="li_two">
</li>
</ul>
</div>
I want to set background:red to the second li element (class "li_two") using pseudo-selectors and want to begin from the most outer div. I'm trying to this way:
#div > ul:nth-child(1) { background:red; } // works but wrong, sets background to ul
#div ul:last-child { background:red; } // doesn't set to any element
#div ul:first-child { background:red; } // again sets to ul but not to li
#div [class=li_two] { background:red; } // only this one works fine
Is it possible to set style to li_two from #div using :nth-child or :last-child or :first-child selectors? How to do it?
#div li:last-child
Your 2nd option was almost right :) I think you misunderstood what last-child does. xx:last-child It doesn't select the last child element of element xx; it selects every xx element that is the last child of it's parent.
Some reading.
I've created a JSFiddle for you to test it
:nth-child() and the other pseudo-classes should be applied to the child elements, not the parent. Apply those pseudo-classes to the lis:
#div ul li:last-child {
background: red;
}