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>
Related
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
This question already has answers here:
Select first Descendant with CSS
(5 answers)
Closed 2 years ago.
I don't have control of the html structure, so for example if I have this structure:
<body>
<div class="red"> <------ style this
<div>content</div>
<div class="red">
<div>
<div class="red">content</div>
</div>
</div>
</div>
</body>
I want to style only the first decendant with the red class..
:not(.red) > * > .red {
background: red;
}
<div class="red">
<div>red</div>
<div class="red">
<div>
<div class="red">red</div>
</div>
</div>
</div>
I have tried following this answer https://stackoverflow.com/a/12922863/2894798 with no results if you inspect the dom in my example you will see that the second decendant with the red class, also has the red style..
Do note that I am trying to select first decendant not first sibling
First you target all elements that have the .red class. Then you unset it from all childs having also this class.
.red {
background: red;
}
.red .red {
background: none;
}
You can use > CSS selector to target only first element without overwriting any properties.
body > .red { border: 1px solid red; }
div { padding: 5px; }
body > .red { border: 1px solid red; }
<body>
<div class="red"> style this
<div>content</div>
<div class="red">
<div>
<div class="red">content</div>
</div>
</div>
</div>
</body>
I have a generic layout component that needs to lay out its children with a vertical space between them:
.container > * + * {
margin-top: 1rem;
}
For reasons I won't go into, I can't guarantee the order the component styles are loaded in.
If a child component has had a reset to its margins applied, for example …
.child {
margin: 0
}
… and it is loaded after the .container css, its styled will win out because a wildcard selector has no specificity, meaning both declarations are of equal weight (so the last declaration will win).
I don't want the container to know or care about what its children are (and I don't want to add a specific class to all the children).
Is there any way to increase the specificity of the first selector while leaving it generic (so it applies to any children).
A more elegant alternative (i.e. one that comes with the additional specificity you need without requiring specificity hacks) is
.container > :not(:first-child)
which is functionally equivalent to your original selector, with a specificity of (0, 2, 0) over the original's (0, 1, 0).
.container {
margin: 1rem 0;
border-style: solid;
}
/* 1 class, 1 pseudo-class -> specificity = (0, 2, 0) */
.container > :not(:first-child) {
margin-top: 1rem;
}
/* 1 class -> specificity = (0, 1, 0) */
.child {
margin: 0;
}
<div class="container">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
<div class="container">
<div class="child">Child</div>
<div class="child">Child</div>
<div class="child">Child</div>
</div>
By adding the selector
.container > * + [class]
You can get a more specific selector it seems for the margin rule.
You can also use the :not() rule as suggested by Temani Afif
.container, .container2, .container3 {
background-color: goldenrod;
border: 1px solid black;
display: block;
margin-bottom:50px;
}
.container > * + * {
margin-top: 1rem;
}
.container2 > * + *,
.container2 > * + [class] {
margin-top: 1rem;
}
.container3:not(#doyoudreamofelectricsheep) > * + * {
margin-top: 1rem;
}
.child {
margin: 0;
height: 20px;
background-color:red;
color: black;
}
.foobar {
height: 20px;
background-color:black;
color: white;
}
Without the "fix"
<section class="container2">
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class>
just class
</div>
</section>
With the [class] "fix"
<section class="container2">
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class>
just class
</div>
</section>
With the :not(#doyoudreamofelectricsheep) "fix"
<section class="container3">
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class="child">
child
</div>
<div class="foobar">
foobar
</div>
<div class>
just class
</div>
</section>
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>
Given the following, is there a way to target an element ONLY if it is an h3 AND it is positioned immediately inside the parent?
<style>
h3:first-of-type { color: #f00; }
</style>
Example a)
<div class="mydiv">
<h3 class="tobetargeted"></h3>
</div>
Example b)
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted"></h3>
</div>
Neither first-of-type or first-child will work because in both cases, the h3 element evaluates to true. What I want is for Example a) to be true but Example b) to be false.
So... IF the element is an H3 AND it is the first element immediately inside the parent.
Any ideas?
:first-child should definitely work out for you.
.test {
border: 1px solid black;
margin: 0 0 10px;
}
.test h3:first-child {
color: red;
}
<div class="test">
<h3>H3 - should be red</h3>
</div>
<div class="test">
<p>p</p>
<h3>H3 - should be black</h3>
</div>
Use this
h3:nth-child(1) { color: #f00; }
h3:nth-child(1) { color: #f00; }
<div class="mydiv">
<h3 class="tobetargeted">Hello</h3>
</div>
<div class="mydiv">
<p></p>
<h3 class="nottobetargeted">Hello</h3>
</div>