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>
Related
I try to make infinity scroll table with only currently visible items rendered in HTML. But with some millions of entries I encountered glich in rendering extreme tall placeholders for unloaded data.
I tried this with div elements and HTML tables too but with similiar glitch.
Please use Chrome to reproduce the problem. With Firefox is problem too but it behaves differently.
Here is minimal example code:
https://jsfiddle.net/bj0tmh2r/
<style>
.row {
border-bottom: 1px solid #f00 !important;
}
</style>
<div class="table-responsive" style="max-height: 600px;">
<div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #f00;height: 33100000px;">
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row">
<div class="col-md">123456</div>
<div class="col-md">Row X</div>
</div>
<div class="row" style="background: #0f0;height: 299px;">
</div>
</div>
</div>
If you scroll to last .row elements, you can see missing bottom red borders between rows.
Why this happens. How to avoid it?
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;
}
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>
I have this bootstrap snippet:
<div class="col-xs-12">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
it creates this table:
Everything looks good on the Desktop, but when I watch it on mobile or tablet it breaks:
Is it possible to create it without breaking? (version with tables does not fit)
Try setting a min-width on the container like this:
.container {
min-width: 630px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
This approach can work for narrow viewports:
[class^="col-"] {
font-size: 2.5vw;
padding: 0;
}
You can wrap it into #media for x-small screens only.
You can set the elements wrapping the breaking divs to display: flex, which will by default display them in one row instead of breaking:
.flex {
display: flex;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12 container">
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project Name</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">Jan</div>
<div class="col-xs-1">Feb</div>
<div class="col-xs-1">Mar</div>
<div class="col-xs-1">Apr</div>
<div class="col-xs-1">May</div>
<div class="col-xs-1">Jun</div>
<div class="col-xs-1">Jul</div>
<div class="col-xs-1">Aug</div>
<div class="col-xs-1">Sep</div>
<div class="col-xs-1">Okt</div>
<div class="col-xs-1">Nov</div>
<div class="col-xs-1">Dec</div>
</div>
</div>
<div class="row">
<div class="col-xs-3 flex">
<div class="col-xs-12">Project #1</div>
</div>
<div class="col-xs-9 flex">
<div class="col-xs-1">10</div>
<div class="col-xs-1">20</div>
<div class="col-xs-1">30</div>
<div class="col-xs-1">40</div>
<div class="col-xs-1">50</div>
<div class="col-xs-1">60</div>
<div class="col-xs-1">70</div>
<div class="col-xs-1">80</div>
<div class="col-xs-1">90</div>
<div class="col-xs-1">100</div>
<div class="col-xs-1">110</div>
<div class="col-xs-1">120</div>
</div>
</div>
</div>
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/