CSS - target last instance of div - html

I have a div structure as below and i want to only target the last .pcontain on the page so i can remove the border-right - how do i go about it?
<div class="container">
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
<div class="postcontainer">
<div class="latest-posts">
<div class="thumbnail"></div>
<div class="pcontain"></div>
<div class="more"></div>
</div>
</div>
</div>


Working Fiddle
Use last child
.postcontainer:last-child .pcontain{
background: black;
color: white;
}
Read more about last-child here


You can use the last-child pseudo-class like:
.postcontainer:last-child .pcontain {
color: darkolive;
}
http://jsfiddle.net/ZZMZn/10/

Related

How can I select all elements except those inside divs with particular classes

I'd like to find a way to select all the makes of cars except those that are inside a div with the class discontinued or scrapped. Here's my markup:
div:not(.discontinued):not(.scrapped) > .make {
color: green;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">BMW</div>
<div class="model">100</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>
As you can see above, I tried the following:
div:not(.discontinued):not(.scrapped) > .make
...but this still included FORD, SEAT, and BMW.

Unfortunately CSS selectors cannot traverse up parent elements, so if you are just trying to style them differently you may want to reverse your thought process and select ones that are .discontinued or .scrapped and apply overriding styles:
.model {
padding-left: 10px;
}
.make {
color: green;
}
.scrapped .make,
.discontinued .make {
color: red;
}
<div class="car">
<div class="make">NISSAN</div>
<div class="model">MICRA</div>
</div>
<div class="discontinued">
<div class="car">
<div class="make">FORD</div>
<div class="model">MONDEO</div>
</div>
</div>
<div class="scrapped">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
<div class="scrapped">
<div class="preowned">
<div class="car">
<div class="make">SEAT</div>
<div class="model">IBIZA</div>
</div>
</div>
</div>
<div class="car">
<div class="make">HONDA</div>
<div class="model">INTEGRA</div>
</div>
<div class="car">
<div class="make">PEUGEOT</div>
<div class="model">206</div>
</div>
<div class="car">
<div class="make">TOYOTA</div>
<div class="model">COROLLA</div>
</div>

Why don't you try this style code,
div.make:not(.discontinued .make):not(.scrapped .make) {
color: green;
}

Target each instance of a class on the page for custom background color using CSS only

I have the same code repeated 3 times on my page, I need to target the ImageSection-hold class and have a different background color for each one.
I am not able to add or remove any classes via HTML or Javascript, this has to be done using CSS.
Attempted:
1.) .ImageSection-hold:nth-of-type(1)
-This changed all of the backgrounds to the same color
2.) .ImageSection-hold{ background-color: #fff;}
.ImageSection-hold~.ImageSection-hold{ background-color: #000;}
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
</div>
</div>
</div>
</section>

You can use the nth-child selector. More info here
.ImageSection:nth-child(1) .ImageSection-hold{
background-color: red
}
.ImageSection:nth-child(2) .ImageSection-hold{
background-color: green
}
.ImageSection:nth-child(3) .ImageSection-hold{
background-color: blue
}
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
asd
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
zxc
</div>
</div>
</div>
</section>
<section class="section ImageSection">
<div class="container">
<div class="ImageSection-hold">
<div class="ImageSection__desc">
qwe
</div>
</div>
</div>
</section>

Bootstrap 4 row & column stacking vertically instead of horizontally

I feel like this should be easy, but I'm trying to get my .temp and .city divs to be side-by-side, but they're stacking vertically instead.
I've tried changing the size of the columns, but they always stack on top of each other. Any ideas?
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>
</div>

You can wrap temp div and city div into 2 different columns. Check this Bootstrap4 Example.
.wind,
.temp,
.city {
height: 50px;
border: 1px solid red;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col-lg" id="col3">
<div class="temp"></div>
</div>
<div class="col-lg" id="col3">
<div class="city"></div>
</div>
</div>

You can rearrange your html code to this format.
<div class="row">
<div class="col-lg" id="col2">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="col-lg" id="col3">
<div class="temp"></div>
<div class="city"></div>
</div>
</div>

You should edit your code to this, making the second row have two columns.
<div class="col-lg" id="col2">
<div class="row">
<div class="col-lg">
<div class="wind"></div>
</div>
</div>
<div class="row">
<div class="col temp"></div>
<div class="col city"></div>
</div>
</div>

Is it possible to add a Link to a mask in HTML

For example on this http://codepen.io/web-tiki/pen/meskA how would one add a a link to the triangles when they are clicked?
<div class="t">
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
<div class="wrap">
<div class="triangle"></div>
<div class="mask"></div>
</div>
</div>

Like this:
<div class="wrap">
<a href="somewhere.com">
<div class="triangle"></div>
<div class="mask"></div>
</a>
</div>
Or dynamically with jQuery:
$(".wrap").each(function(){
$(this).find("div").wrapAll( "<a href='link.com' />");
});

you could add onclick events on each wrap divs you got.
<div class="wrap" onclick="location.href = 'www.yoursite.com'">

Target every other children of each parent

I've been struggling with this for a while, and it's time for some help.
I have this:
<div class="news-images">
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect"></div>
</div>
</div>
</div>
I want to target every other (a 2n+1, odd/even kind of thing) instance of the "effect" class. Is this possible with pure CSS or do i need some JavaScript?
Thanks!

Do You Want this? if not, Please explain briefly.
.col-md-12:nth-child(odd) .effect{
background: black;
color: #fff;
}
.col-md-12:nth-child(even) .effect{
background: blue;
color: #fff;
}
<div class="news-images">
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
<div class="col-md-12">
<div class="grid">
<div class="effect">hello world!</div>
</div>
</div>
</div>