I need to select all headers but the first
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>
Using jquery I would do this $(".header:not(:first)"), I'm however restricted to CSS/CSS3. I cannot tag the elements other than in my example.
Using .header:not(:first-child) wont do the trick
The .header elements are not siblings, therefore you should probably select all but the first .block element, then select the descendant .header from there:
.block:not(:first-child) .header {}
Depending on your markup, you may also want to negate the first of type if the element's types differ:
.block:not(:first-of-type) .header {}
.block:not(:first-child) .header {
color: #f00;
}
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>
As David Thomas points out, you can also use the adjacent sibling combinator, + or the general sibling combinator, ~ in order to select all following siblings:
.block ~ .block .header {}
or:
.block + .block .header {}
.block + .block .header {
color: #f00;
}
<div class="block">
<div class="header">first</div>
</div>
<div class="block">
<div class="header">second</div>
</div>
<div class="block">
<div class="header">third</div>
</div>
<div class="block">
<div class="header">fourth</div>
</div>
Related
it is actually quite simple:
If I have several children, I want .child to have margin-bottom: 10px;
if there is only one child, I don't want to have that margin
obviously:
Just adding another class to the container is not an option. CSS solution only
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
so first container's child should have no margin. The other examples should have a margin between each child
You can make use of the :first-of-type pseudo-class in conjunction with the :not negation pseudo-class, and set margin-top instead. This will only give the margin-top to child elements which have a preceding element, thus giving the separation effect you're looking for:
.container {
border: 1px solid black;
}
.child:not(:first-of-type) {
margin-top: 10px;
}
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
You can add a margin to each element after a previous one, so we only have margin-top if there is an element before.
.container {
border:2px solid;
margin:20px;
}
.child {
height:20px;
background:red;
}
.child + .child {
margin-top:10px;
}
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
Or remove the margin-bottom from the last element so when having only one element it will also be the last element:
.container {
border:2px solid;
margin:20px;
}
.child {
height:20px;
margin-bottom:10px;
background:red;
}
.child:last-child {
margin-bottom:0;
}
/* OR
.child:not(:last-child) {
margin-bottom:10px;
}
*/
<div class="container">
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
<div class="container">
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
<div class="child">xxx</div>
</div>
I have a sass block that i have tried several different ways:
I've tried this:
.progress-body {
display: none;
&:first-of-type {
display: block;
}
}
and this:
.progress-body {
&:not(:first-of-type) {
display: none;
}
}
and this:
.progress-body:not(:first-of-type) {
display: none;
}
when applied to HTML that looks like this:
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 1: Choose your template...</p>
</div>
</div>
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 2: Compose your email...</p>
</div>
</div>
</div>
</div>
the result is that it hides all the elements with the progress-body class. This is normally pretty straight forward CSS so no idea what is wrong here...
In this case progress-body is not the first-of-type, this would technically be .panel-heading since the first-of-type refers to the type element selector (div) and not the class.
The :first-of-type CSS pseudo-class represents the first element of
its type among a group of sibling elements.
Ref: :first-of-type - CSS | MDN
Consider wrapping your .progress-body elements in a containing element, you will achieve the expected behaviour, since .progress-body would be the first of its type with the class name .progress-body.
Code Snippet Demonstration:
.progress-body:not(:first-of-type) {
display: none;
}
<div class="panel">
<div class="panel-heading">
</div>
<div class="panel-outer-body">
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 1: Choose your template...</p>
</div>
</div>
</div>
<div class="panel-body progress-body">
<div class="row">
<div class="col-md-12">
<p class="lead">Step 2: Compose your email...</p>
</div>
</div>
</div>
</div>
</div>
If you can't wrap as UncaughtTypeError wrote in his answer, youcan use (general) sibling selectors.
.progress-body + .progress-body {display: none;}
or
.progress-body ~ .progress-body {display: none;}
I expect the first is block by default, if you didn't change it elsewhere.
trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:
<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>
CSS
.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}
The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row
Use the below css selector it should be affecting for all rows.
.f1 .container .row {
padding-top:42px;
position:relative;
}.
It should work.
I am trying to apply a style to a div based on its parent class. I am using the :not() selector to select the div whose parent is not .container1, the second div should be red, but it's not working.
Example 1
.myDiv:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Example 2
.myDiv:not(.container1 .myDiv) {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Is this even possible with CSS? Or is my syntax just off?
You're selecting wrong elements. No reverse lookups possible, see here:
div:not(.container1) > .myDiv {
color: red;
}
<div class="container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container2">
<div class="myDiv">Div 2</div>
</div>
Ideally, you'd group those parent divs under the same class in order to avoid the super-generic div selector:
.container:not(.container1) > .myDiv {
color: red;
}
<div class="container container1">
<div class="myDiv">Div 1</div>
</div>
<div class="container container2">
<div class="myDiv">Div 2</div>
</div>
CSS can't do "parent lookups" like that. You would need to reverse the structure to something like:
.my-container:not(.container1) .myDiv
Granted, you would need to add the shared my-container class to all "parent" divs of interest.
Without adding any classes (or touching the HTML) is there a way to target the first element inside a div ONLY if there is a second element in that div? Below is my HTML:
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
A few context to this for a better picture ... I want to center the .content if it's the only .content inside .grid. But if there are two .content divs, then I want them to float next to each other.
Note:
I already know I can target the second .content by
.grid .content:nth-child(2) { ... }
.grid > .content:first-child:not(:only-child) {
color: blue;
}
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">Don't apply here</div>
</div>
<div class="grid">
<div class="content">I WANT TO APPLY CSS TO THIS</div>
<div class="content">But only if there is 2nd .content element in the same parent element</div>
</div>
:first-child:not(:only-child) would be your selector.