Background color different even row - css

I have this:
<div class="row">
<div>something</div>
<div>something</div>
</div>
<div class="row">
<div>something</div>
<div>something</div>
</div>
I would like that for even class="row" all childs div have a background (blue for example) and for odd class="row" all childs div have a background (red for example)
so the result would be:
<div class="row">
<div style="background:blue">something</div>
<div style="background:blue">something</div>
</div>
<div class="row">
<div style="background:red">something</div>
<div style="background:red">something</div>
</div>


You can do it with CSS
.container > .row:nth-child(even) > div{
background: red;
}
.container > .row:nth-child(odd) > div{
background: blue;
}
<div class="container">
<div class="row">
<div>something</div>
<div>something</div>
</div>
<div class="row">
<div>something</div>
<div>something</div>
</div>
<div class="row">
<div>something</div>
<div>something</div>
</div>
<div class="row">
<div>something</div>
<div>something</div>
</div>
</div>


Put them inside of a container like so:
<div class="container">
<div class="row">
<div>something</div>
<div>something</div>
</div>
<div class="row">
<div>something</div>
<div>something</div>
</div>
</div>
.container row:nth-child(even) div
{
background: blue
}
.container row:nth-child(odd) div
{
background: red
}

Related

Newspaper-style div alignment with flex-wrap, overflow, without fixed container size

I am currently working on an issue with regards to HTML+CSS and reaching the limits on what I know is possible. Here is the issue:
https://jsfiddle.net/jwco2sd8/1/
.container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
overflow-y: auto;
}
.item {
width: 10em;
height: 2em;
margin: 0.1em;
background-color: red;
}
.item:nth-child(3n+2) {
background-color: lightgreen;
}
.item:nth-child(3n+3) {
background-color: blue;
}
<html>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
</div>
</body>
</html>
I want to achieve a newspaper-style ordering of the divs in the example linked. That means that the primary ordering of the items should be "column", but if there is horizontal space, instead of overflowing vertically, items should first be distributed horizontally first - and then if there is not enough space overflow vertically. I want the container to resize dynamically with the browser window, so I cannot set a constant width or height of the container item.
Adding a 'max-height: 25em' to the .container div, simulates what I want to achieve (on my screen):
Is there a way to achieve the desired effect with just HTML/CSS but without media-queries and JavaScript code. I pretty much understand why what I am doing is not working, but I do not know if there are alternatives.
I added a little bit of JavaScript now to do the necessary "space-left" computations and set max-height from there, but I still feel that a pure CSS+HTML solution should work and would be nicer. Are there any other ways that to accomplish this?

This is the job of columns where you only define the column-width and you keep the column-count auto
.container {
column-width:10em;
}
.item {
width: 10em;
display:inline-block;
height: 2em;
margin: 0.1em;
background-color: red;
}
.item:nth-child(3n+2) {
background-color: lightgreen;
}
.item:nth-child(3n+3) {
background-color: blue;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
</div>

How can I select a range of elements following a specific (.selected) element that has a different parent element?

As you can see, there are .row elements that are parent to .cell elements.
I have a selected element inside a .row element, I want to target:
An element that is a child of the parent element that follows the parent containing .selected
Is this possible in CSS only?
Assume I want to select the second .cell of the parent next to the parent containing .selected
How do I turn the background color of the div containing the number 13 green?
.row .cell.selected {
background-color: red
}
.row .cell.selected+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell {
background-color: red;
}
.row .cell.selected+.cell+.cell+.cell+.cell+.cell {
background-color: red;
}
#month-view .row .cell.selected+.cell {
background-color: yellow;
}
.row {
padding: 50px;
}
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
/div>

If I understood your question you want that the cell that gets a ".selected" class in the first row gets a styling in a cell in the same position in the second row.
That is not possible with CSS only, just using JS. CSS can't give you the index position of your ".selected" cell.
If you want a solution that is pure HTML and CSS I recommend you to add a second class like ".selected-column" to the next rows and style after this.

Not possible in CSS as you can't go backwards/up the DOM in CSS. But in case you can use JS or jQuery, here's a way. It's pretty easy and intuitive with jQuery using $.parent(), $.next(), and :nth-child.
$('.selected').parent('.row').next('.row').find('.cell:nth-child(2)').addClass('green');
.row .cell.selected {
background-color: red
}
.row {
padding: 50px;
}
.green {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="month-view">
<div class="row">
<div class="cell">
<div class="day"> <span>5</span></div>
</div>
<div class="cell selected">
<div class="day"><span>6</span></div>
</div>
<div class="cell">
<div class="day"><span>7</span></div>
</div>
<div class="cell">
<div class="day"><span>8</span></div>
</div>
<div class="cell">
<div class="day"><span>9</span></div>
</div>
<div class="cell">
<div class="day"><span>10</span></div>
</div>
<div class="cell">
<div class="day"><span>11</span></div>
</div>
</div>
<div class="row">
<div class="cell ">
<div class="day"><span>12</span></div>
</div>
<div class="cell">
<div class="day"><span>13</span></div>
</div>
<div class="cell">
<div class="day"><span>14</span></div>
</div>
<div class="cell">
<div class="day"><span>15</span></div>
</div>
<div class="cell">
<div class="day"><span>16</span></div>
</div>
<div class="cell">
<div class="day"><span>17</span></div>
</div>
<div class="cell">
<div class="day"><span>18</span></div>
</div>
</div>
</div>

Why does nth-of-type() and nth-child() break with unrelated element

I am obviously missing something really fundamental but I have the following html
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
and am using the following selectors
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
Which I believe expresses 'select the nth child items of .text-cont where class contains .row and is either odd or even'.
Yet the <div class="md-margin"></div> break these selectors.
So I end up with
Instead of the alternating pattern I expect. The problem is resolved when I remove the md-margin divs. What am I missing?

it is because you have those md-margin divs in between, making them the even ones.
(althought :nth-of-type will show the result you want when using classes - depending on the markup -, but it refers to the element type, that's why div with md-margin are "counting" here.
snippet with md-margin
.test-cont .row:nth-of-type(4n+2) {
background: purple;
}
.test-cont .row:nth-of-type(4n+4) {
background: red;
}
<div class="test-cont">
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="md-margin"></div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>
Snippet without md-margin
.test-cont .row:nth-of-type(odd) {
background: purple;
}
.test-cont .row:nth-of-type(even) {
background: red;
}
<div class="test-cont">
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
<div class="row">
<div class="col-md-12">TEST2</div>
</div>
<div class="row">
<div class="col-md-12">HELLO WORLD</div>
</div>
</div>

Div overlapping issue in bootstrap mobile version

I have a carousel, and 2 rows in bootstrap. The layout is fine in standard view but when it goes into mobile queries the page layout becomes messed up. The 2nd row seems to overlap the blue column and i am not sure why.
https://jsfiddle.net/ydcategd/
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>

You should target mobile devices first if you want mobile responsiveness
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-xs-4 one">
<p>123</p>
</div>
<div class="col-xs-4 two">
<p>456</p>
</div>
<div class="col-xs-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
<div class="col-xs-4 four">
</div>
</div>
Based on your updates check this fiddle

Here is your fix:
HTML:
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel" >
<div class="carousel-inner">
<div class="item active">
<div >
</div>
</div>
</div>
</div>
<div class="container-fluid box">
<div class="row" id="triple">
<div class="col-lg-4 one">
<p>123</p>
</div>
<div class="col-lg-4 two">
<p>456</p>
</div>
<div class="col-lg-4 three">
<p>789</p>
</div>
</div>
<div class="row" id="single">
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
<div class="col-lg-4 four">
</div>
</div>
CSS:
html, body{
height: 100%;
}
.carousel, .item, .active, .carousel-inner{
height: 100%;
}
.item>div{
width: 100%;
height: 100%;
}
.item:nth-child(1) > div {
background-color: yellow;
}
.box{
width: 100%;
height: 100%;
position:absolute;
top:100%;
}
#triple{
height: auto;
}
.col-lg-4 {
height:100%;
}
.one, .two, .three{height: 50vh;}
.one{ background-color:red;}
.two{ background-color:blue;}
.three{ background-color:green;}
.four{ background-color:orange;}
#single{
height:50%;
border:1px solid black;
}
#media (max-width: 767px){
.one, .two, .three{height: 100vh;}
}
Fiddle: https://jsfiddle.net/vsk59tck/1/

pseudo-element :first-child not being picked up

Given the following snippet, I would expect the div containing "Award 1" to have a red background colour. Can someone explain to me why it does not? The first item should have a border top.
.item-wrap:first-child .item {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
:first-child (https://developer.mozilla.org/en-US/docs/Web/CSS/%3Afirst-child)
In your example you are attempting to select an element with the class .item which resides in a parent with the class .item-wrap which itself is the first child of its parent (in this case .awards). As .item-wrap is not the first child of .awards it does not match.
Given your markup the following rule should fit your needs:
.awards :first-child + .item-wrap .item:first-child {
border-top: 1px solid black;
}
.item {
width: 100%;
border-bottom: 1px solid black;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
This will select an element with the class .item which is the first child of its parent .item-wrap which is immediately preceded by the first child that belongs to the element with the class .awards.

you need to wrap child elements with a parent div like this,
HTML
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>
</div>
CSS
.item-wrap:first-child .item {
background-color:red;
}
http://codepen.io/anon/pen/QjJBQL

.item-wrap:nth-child(2){
background: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
</div>
</div>

.item:first-child{
color: red;
}
<div class="row awards">
<div class="col-xs-12">
<h2 class="no-border">Awards</h2>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 1</div>
<div class="item">Award 1a</div>
</div>
<div class="col-xs-12 item-wrap">
<div class="item">Award 2</div>
<div class="item">Award 2a</div>
</div>
</div>
Place the selector on the child, not the parent (http://codepen.io/anon/pen/vNQamR):
.item:first-child{
color: red;
}

Resources