This question already has answers here:
What does the ">" (greater-than sign) CSS selector mean?
(8 answers)
Closed 3 years ago.
Im trying to select the last two div's with class row in my container div
I have tried this code
.child1 {
padding: 5px;
background-color: red;
margin: 5px;
width: 30%;
}
.parent .child :nth-last-child(-n+2) {
background-color: green;
}
<div class="parent">
<div class="child">
<div class="child1">test1</div>
<div class="child1">test2</div>
<div class="child1">test3</div>
<div class="child1">
test4
<div class="child2">test42</div>
</div>
<div class="child1">test5</div>
<div class="child1">test6</div>
</div>
</div>
Im expecting that the backgrounds of test5 and test6 is going to be green.
The problem is the background of test42 is also comming green.
Use the child combinator > to only target direct children:
.child1 {
padding: 5px;
background-color: red;
margin: 5px;
width: 30%;
}
.parent .child>:nth-last-child(-n+2) {
background-color: green;
}
<div class="parent">
<div class="child">
<div class="child1">test1</div>
<div class="child1">test2</div>
<div class="child1">test3</div>
<div class="child1">
test4
<div class="child2">test42</div>
</div>
<div class="child1">test5</div>
<div class="child1">test6</div>
</div>
</div>
Related
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I want to be able to target 'lorem' only in both cases using CSS only in a list with the same HTML elements (div's in this case). So when I delete the ID from the list it should still only style the first element with class 'items__item'. Does anyone have an idea?
.items {
display: flex;
flex-direction: row;
margin: 10px;
}
.items > div {
padding: 0 5px;
}
.items__item:first-child {
color: green;
}
.items__item:first-of-type {
color: green;
}
.items__item:nth-of-type(2) {
color: red;
}
<div class="items">
<div class="id">23432</div>
<div class="items__item">lorem</div>
<div class="items__item">ipsum</div>
<div class="divider">|</div>
<div class="items__item">dolor</div>
</div>
<div class="items">
<div class="items__item">lorem</div>
<div class="items__item">ipsum</div>
<div class="divider">|</div>
<div class="items__item">dolor</div>
</div>
.items {
display: flex;
flex-direction: row;
margin: 10px;
}
.items > div {
padding: 0 5px;
}
.items div.items__item ~ div.items__item {
color: black;
}
.items div.items__item {
color: red;
}
<div class="items">
<div class="id">23432</div>
<div class="items__item">lorem</div>
<div class="items__item">ipsum</div>
<div class="divider">|</div>
<div class="items__item">dolor</div>
</div>
<div class="items">
<div class="items__item">lorem</div>
<div class="items__item">ipsum</div>
<div class="divider">|</div>
<div class="items__item">dolor</div>
</div>
Now if you remove the element with class id it will work.
This question already has answers here:
Pure css Chessboard with div & no classes or ids, is it possible?
(15 answers)
Closed 4 years ago.
I have multiple elements displaying floated left to create rows of 4 elements. I have made them alternate background colour:
div > div { float:left; width:25%; height:50px; background-color:black; }
div > div:nth-child(2n) { background-color:white; }
<div>
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
However, what I really need is to alternate between black-white-black-white and white-black-white-black to create a chess board effect. I don't want to alter the HTML if possible. So what I really need is way of alternating an alternate every 4 elements.
Simply move your selector to one before 2n -> 2n-1
.board {
width: 90px;
}
.board div {
width: 30px;
height: 30px;
box-sizing: border-box;
border: 1px solid #ddd;
}
div > div { float:left; width:25%; background-color:black; }
div > div:nth-child(2n-1) { background-color:white; }
<div class="board">
<div id="el1"></div>
<div id="el2"></div>
<div id="el3"></div>
<div id="el4"></div>
<div id="el5"></div>
<div id="el6"></div>
<div id="el7"></div>
<div id="el8"></div>
<div id="el9"></div>
<div id="el10"></div>
<div id="el11"></div>
<div id="el12"></div>
</div>
This question already has answers here:
What do two dots in a CSS declaration mean?
(6 answers)
Closed 7 years ago.
I found some css code which is using
.move.up{
//css goes here
}
something like this. Can anyone tell me what type of selector it is in css..??
It just describes a element with a class move that also has the class up-
<div class="move up"> <- Selected
<div class="up move"> <- selected
<div class="up"> <- Not selected
<div class="move"> <- Not selected
<div class="move something up"> <- selected
Sample: http://jsfiddle.net/3gkmf3rx/1/
It means an element should have both class move and up. Multiple className's can be assigned to an HTML element by separating them with space.
Ex: Click here
More details here
It just selects elements with the classes "move" and "up".
http://www.w3schools.com/cssref/css_selectors.asp
div{
width: 60px;
height: 60px;
background: beige;
border: solid black;
float:left;
margin: 10px;
text-align: center;
line-height: 60px;
font-family: arial;
font-weight: bold;
}
.separator{
width: 5px;
height: 60px;
border: solid black;
background: grey;
clear: both;
}
.move.up{
background: green;
}
//Additional knowledge
.class1 .class2{
background: orange;
}
span div{
background: purple;
}
.class3, .class4{
background: brown;
}
<div class="separator"></div>
<div class="move">
1
</div>
<div class="up">
2
</div>
<div class="move up">
3
</div>
<div class="move classyclass up">
4
</div>
<div class="separator"></div>
<!-- Additional knowledge :) -->
<div class="class1">
5
</div>
<div class="class2">
6
</div>
<div class="class1 class2">
7
</div>
<div class="class1 classyclass class2">
8
</div>
<span>
<div>8.1</div>
</span>
<div class="separator"></div>
<div class="class3">
9
</div>
<div class="class4">
10
</div>
<div class="class3 class4">
11
</div>
<div class="class3 classyclass class4">
12
</div>
I've searched quite a bit looking for an explanation as to why this behavior is occurring.
Essentially I've setup 2 columns, each with a nav bar and content area.
CSS
#mainContainer {
background-color: lightblue;
width: 100%;
height: 300px;
}
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
}
#leftBar, #rightBar {
background-color: purple;
height: 10%;
}
#leftMain, #rightMain {
background-color: grey;
height: 90%;
}
HTML
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar"></div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
Whenever I add an element to the nav bar in only one column it shifts the entire column down.
http://jsfiddle.net/qn6rs0q2/3/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar"></div>
<div id="rightMain"></div>
</div>
</div>
But if I add another element to the other column they line up again.
http://jsfiddle.net/qn6rs0q2/5/
<div id="mainContainer">
<div id="leftContainer">
<div id="leftBar">
<button>Test</button>
</div>
<div id="leftMain"></div>
</div>
<div id="rightContainer">
<div id="rightBar">
<button>Test 2</button>
</div>
<div id="rightMain"></div>
</div>
</div>
To clarify, I'm not looking for a solution to fix this behavior. Rather I'm hoping someone can explain the underlying reason behind why it's behaving as it is. Thanks in advance.
It happens because the default vertical alignment of inline elements is the baseline. If you set the vertical alignment to top (or middle) for both sides, they line up as you want:
#leftContainer, #rightContainer {
border: 1px solid black;
display: inline-block;
background-color: red;
width: 40%;
height: 100%;
vertical-align:top;
}
jsFiddle example
Need help guys I have this HTML code:
<div class="editable">
<div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
<div class="column col1of5">
</div>
</div>
</div>
I want to select the last .col1of5 through css how can I do that?
Use this CSS to get the last child :
.parentDiv .col1of5:last-child {
/* CSS */
}
I just saw your HTML.
Here is the solution. refer this fiddle.
The HTML
<div class="editable">
<div>
<div class="column col1of5">1</div>
<div class="column col1of5">2</div>
<div class="column col1of5">3</div>
<div class="column col1of5">4</div>
<div class="column col1of5">5</div>
</div>
</div>
The CSS
.editable div {
background: none repeat scroll 0 0 #292929;
color: white;
list-style: none outside none;
padding-left: 0;
width: 200px;
}
.editable div div {
border-bottom: 1px solid black;
border-top: 1px solid #3C3C3C;
padding: 10px;
}
.editable div div:first-child {
border-top: medium none;
}
.editable div div:last-child {
border-bottom: medium none;
color: red;
}
Hope this helps.
Try this:
.col1of5:last-child {
/* my CSS rules */
}
:last-child is a pseudo selector and it points to the element that is the last child element of a certain node. It may sound logical enough but it can be confusing, since you may think it should be .editable:last-child. You should apply the selector to the child element itself, not the parent.