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;
}
}
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 want to grab all the class name ('my-class') and change it's color to red EXCEPT for the last one
Apparently I've been googling and there's no such thing as :last-of-class or whatever. I'm having trouble trying to find a work around without using JS.
div1 and div2 are both dynamic! If div2 doesn't exist, then div1 should have the first p element red and the second not.
Please note I left a 'p' tag at the top because I don't want that being part of my selector. I just need the 'my-class' specifically.
or is there a selector I can write to grab all "p"s inside of my-container which include nested P's
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class"></p>
<p class="my-class"></p>
</div>
<div class="div2">
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p>
<p class="my-class"></p> <!-- This tag should not be red-->
</div>
</div>
I can also use sass so feel free to include that in if need be.
I don't know of any SINGLE rule that would do this, but a simple workaround would be to use 2 separate rules in conjunction:
.my-class {
color: red;
}
.div-2 .my-class:last-child {
color: // whatever you want the default to be
}
note that the order is important, setting the last child's color should be done after setting everything first
You can use the workaround below.
use div:last-child . that will select the last div in the container and if there is only one, it will select it and so...the last p from the last div will be of other color ( in this example )
.my-container div p.my-class {
color:red;
}
.my-container div:last-child p.my-class:last-child {
color:blue;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">a</p>
</div>
<div class="div2">
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">a</p>
<p class="my-class">b</p> <!-- This tag should not be red-->
</div>
</div>
This will get the behavior you're looking for without any forced reflow:
.my-class:not(:last-child) {
color: red;
}
<p>Some text</p>
<div class="my-container">
<div class="div1">
<p class="my-class">a</p>
<p class="my-class">b</p>
</div>
<div class="div2">
<p class="my-class">c</p>
<p class="my-class">d</p>
<p class="my-class">e</p>
<p class="my-class">f</p> <!-- This tag should not be red-->
</div>
</div>
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 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/