I want to apply a style on all children of a class except .fixedsize children:
.inner *:not(.fixedsize){
max-width:100%
}
.fixedsize > *{
max-width:none
}
<div class="inner">
<div>
<div id="map" class="fixedsize">
inspect the map here
<div id="childOfMap">inspect the child of map here</div>
</div>
</div>
</div>
It seems not working. How can I exclude it and all of its children from * selector?
Edit:
When I inspect the main element (map) in stackoverflow snippet it has no max-width:100% and this is ok. But in runtime and perhaps a more complex codes when I inspect the map, It has max-width:100% calculated from this * selector.
The issue is that the :not() selector is more specific, so you need to increase the specifity of the other selector or use !important
.inner *:not(.fixedsize) {
border:1px solid red;
}
/*Adding not() will make the specifity of this one higher*/
.fixedsize *:not(#randomId) {
border:none;
}
<div class="inner">
<div>
<div id="map" class="fixedsize">
no border
<div id="childOfMap">no border <span>here also</span></div>
</div>
<div>Content</div>
</div>
<div>some other content<span>here</span></div>
</div>
With !important:
.inner *:not(.fixedsize) {
border:1px solid red;
}
.fixedsize * {
border:none!important;
}
<div class="inner">
<div>
<div id="map" class="fixedsize">
no border
<div id="childOfMap">no border <span>here also</span></div>
</div>
<div>Content</div>
</div>
<div>some other content<span>here</span></div>
</div>
Related
I've am stuck on this css issue. Here is a simplified code :
<div class="parent type1">
<div class="child">
red
</div>
</div>
<div class="parent type2">
<div class="child">
blue
</div>
<div>
I don't know how to code this (or if I can code this) but I need something like :
"If class is "child" and parent's class is "type2", put the div in blue (without changing the red div)".
Knowing that in my specific situation, I can't change the html, so I can't add some ids.
Thank you in advance and have a great day ! :-)
Chained CSS could do the trick:
.type2 .child {
color: blue;
}
/* OR combined classes + child */
.parent.type2 .child {
color: blue;
}
/* OR direct child of type2 */
.type2 > .child {
color: blue;
}
.type2 div{
color : blue;
}
.type2 .child{
color : blue;
}
<div class="parent type1">
<div class="child">
red
</div>
</div>
<div class="parent type2">
<div class="child">
blue
</div>
<div>
I have layout that is generated dynamically so order of elements could change. Each element that is part of this layout has its own different class. I want to be able to select element of certain class but only if it is last child of its parent to apply styling. If element with different class is last child of its parent, it should not be selected. Is it possible to have this kind of scss selector and achieve this functionality without using javascript?
Example:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
I want to select element with class child3 only if it is last child of div with class parent.
So if child2 class element is last child of div class parent it is not selected, for example here:
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Yes, and this is the normal CSS behaviour. You can do something like this:
.parent .child3:last-child {}
This is a rule that selects:
a .child3 element inside .parent.
.child3 element comes as the last, there's no other elements after that including text.
For SCSS, you can do something like this:
.parent {
.child3 {
&:last-child {
// Rules.
}
}
}
Example Snippet
.parent .child3:last-child {
background: #ccf;
}
<strong>Trial 1</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
<hr />
<strong>Trial 2</strong>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
Preview
You can select elements by their attributes, so something like this would achieve your goal.
.parent div {
width: 50px;
height: 50px;
background-color: blue;
border: solid 1px black;
}
.parent div:last-of-type[class="child3"] {
background-color: red;
}
<div class="parent">
<div class="child1">Hello!</div>
<div class="child3">Hello!</div>
<div class="child2">Hello!</div>
</div>
<div class="parent">
<div class="child1">Hello!</div>
<div class="child2">Hello!</div>
<div class="child3">Hello!</div>
</div>
https://www.w3schools.com/cssref/css_selectors.asp
In this JSFiddle, how can I style all <a> elements except the first grandchild? (abc) with a single selector? I want to avoid using two rules at all costs.
#outer a:not(:first-child){
color: red;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
You can do this (not sure if you can avoid more than 1 selector)
#outer >div:first-child a:not(:first-child),
#outer >div:not(:first-child) a{
color: red;
border:1px solid;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
One rule 2 selectors:
a ~ a The general sibling combinator covers any <a> that follows another <a>. This basically selects all but the first <a> of sibling <a>.
div:nth-of-type(n+2) a This targets all <a> inside the second div and any preceding sibling divs in the future🟊.
Demo
a~a,
div:nth-of-type(n+2) a {
color: red
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
🟊 Props to Temani Afif for suggesting (n+2).
This works, not exactly sure why!
#outer :not(:first-child) {
color: red;
}
<div id="outer">
<div id="firstParent">
<a>abc</a>
<a>def</a>
<a>hij</a>
</div>
<div id="secondParent">
<a>klm</a>
<a>opq</a>
</div>
</div>
In CSS, I select "first-child". I want only <div class="b">1</div> on red background. I don't understand
div {
height: 50px;
margin-bottom: 10px
}
.a .b:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</div>
</div>
.a .b:first-child means any .b:first-child that is a descendant of .a. Space is the descendant combinator; it doesn't link :first-child to .a in any way.
You want a direct child of .a, using the child combinator: .a > .b.
I think you want your first-child pseudo-class on .a, not .b.
div {
height: 50px;
margin-bottom: 10px
}
.a:first-child {
background: red
}
<div class="a">
<div class="b">1</div>
<div class="c">
<div class="b">2</div>
<div class="b">3</div>
<div class="b">4</div>
</div>
</div>
How can I write a CSS Rule that selects all div.box that are not inside .container?
The following snippet is not working because there is a div without .container inside the div.container.
div:not(.container) .box {
background:red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
If you do not want to override every attribute, the only way I see is to give an additional class to the boxes inside of the specific container.
.box:not(.exclude) {
background: red;
}
<div class="box">box</div> <!-- select this -->
<div class="container">
<div>txt</div>
<div><div class="box exclude">box</div></div>
</div>
<div class="box">box</div> <!-- select this -->
In a way, the CSS rule you are asking for is sort of backwards. You should start with the most generic rules, and then add more specific ones. In your case, you should do something like the following:
/* Generic Box styles */
.box
{
border: 1px solid black;
}
/* Boxes in a container */
.container .box
{
color: blue;
}
<div class="box">Generic Box</div>
<div class="container">
<div class="box">I'm in a container</div>
</div>
Select all div.box or all div not inside .container? What you ask for and what you say you want selected in the html code sample are not the same thing. That said, your css selectors are just out of order. Try:
div.box:not(.container) {
background:red;
}
and
<div class="box">box</div>
<div class="container">
<div>txt</div>
<div><div class="box">box</div></div>
</div>
<div class="box">box</div>
If you want all the divs, just remove the .box