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.
Related
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 6 months ago.
So i have a div with 2 columns and images in both of them,and i want only the first image to have a margin.
HTML code:
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
CSS portion:
div.center img:first-child{
margin-left:100px;
}
The only problem is,the first child selector isn't working as intended and styles both of my images and give them a margin...How do i Fix this?
You css isn't working because both of your img elements are the first child inside of their parent.
What you maybe want is to add a margin to the image inside of the first column.
Something like
.column:first-child img {
margin-left: 100px;
}
Without seeing the rest of your html i cannot know if this will work correctly. It will only work if the first column is indeed the first child inside its parent.
Another solution would be for you to add classes to your images, something like
<div class="column">
<div class="center">
<img class="image image--with-margin" src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img class="image" src="assets/images/images/sliced-2.png">
</div>
</div>
and then
.image--with-margin {
margin-left: 100px;
}
you can wrap the columns in a container div and target only the first column
html:
<div class="container">
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
</div>
and css:
.container .column:first-of-type img {
margin-left: 100px;
}
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.
I am using bulma as css framework, and have a section on my page where I am looping over items, and creating multiline columns.
<section class="section employees">
<div class="container">
<div v-for="(value, key) of employeesGroupedByDepartments">
<div class="columns is-multiline department">
<div class="title-with-line">
<h4><span>{{ key }}</span></h4>
</div>
<div class="employee column is-3" v-for="employee of value">
<div class="card">
<figure class="image is-96x96">
<img :src="employee.image.data.path" alt="">
</figure>
<h4 class="title is-5">
{{employee.title}}
</h4>
<h6 class="subtitle is-6">
<small>
{{getExtras(employee, 'position')}}
</small>
</h6>
</div>
</div>
</div>
</div>
</div>
</section>
I would like to remove left padding for each first child column, I have tried with setting even to both classes padding left 0 as important but nothing worked:
.employees {
.column:first-child, employee:first-child {
padding-left: 0!important;
}
}
What am I doing wrong?
A .column will never be a first-child, because there is always a div.title-with-line before it.
From MDN:
The :first-child CSS pseudo-class represents the first element among a group of sibling elements.
You would need the :nth-child or :nth-of-type selector.
.column is not the first child as you have a div with class title-with-line proceeding it. What you're looking for is:
.employees {
.column:nth-child(2), .employee:nth-child(2) {
padding-left: 0!important;
}
}
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.
I am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/