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>
Related
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>
Is it possible to create a CSS rule that applies to the every element except for the first 8 elements? Ie, the 8th plus elements should have a margin top of 65px.
My below less code applies margins to every odd and even button within a menu. Now I want to add a specific margin to the 8th plus buttons. And then ideally apply a specific margin to the 16th plus buttons and so on.
.foo-menu {
.foo-menu-btn {
float: left;
margin: 1px;
}
// Apply specific margin to every second(even) button
.foo-menu-btn:nth-child(even) {
margin-left: -23px;
margin-top: 46px;
}
// Apply specific margin to every odd button
.foo-menu-btn:nth-child(odd) {
margin-left: -23px;
}
// For every button after the 8th one; apply a specific margin
.foo-menu-btn:nth-child( ??? ) {
margin-top: 65px;
}
}
<div class="foo-menu">
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
<div class="foo-menu-btn"></div>
</div>
Try below code, i think help full to you.
hr {
display: block; float: left;
width: 50px; height: 50px;
border: solid 2px #aaa; margin: 10px;
}
hr:nth-child(n+9):not(:nth-last-child(-n)) {
background-color: #ddd;
}
<div id=t>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
<hr>
</div>
You can use the native CSS :nth-child pseudo-class to specify a range. According to the case you specified it might look like this:
div.foo-menu div.foo-menu-btn:nth-child(n+8):nth-child(-n+15) {
margin-left: 50px
}
The downside is that you still have to manually define each range.
To select everything other than the first 8 divs you can use .foo-menu-btn:nth-child(n+9). See it applied to your HTML below (I took out the negative margins so that the divs would be visible for this example):
.foo-menu-btn {
float: left;
margin: 1px;
background-color: #ccc;
height: 1rem;
}
.foo-menu-btn:nth-child(even) {
margin-top: 46px;
}
.foo-menu-btn:nth-child(n+9) {
margin-top: 65px;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</div>
Use :
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
.foo-menu .foo-menu-btn:nth-child(odd){
color: red;
}
.foo-menu .foo-menu-btn:nth-child(even){
color: green;
}
.foo-menu .foo-menu-btn:nth-child(n+9){
color: blue;
}
<div class="foo-menu">
<div class="foo-menu-btn">1</div>
<div class="foo-menu-btn">2</div>
<div class="foo-menu-btn">3</div>
<div class="foo-menu-btn">4</div>
<div class="foo-menu-btn">5</div>
<div class="foo-menu-btn">6</div>
<div class="foo-menu-btn">7</div>
<div class="foo-menu-btn">8</div>
<!-- Now every foo-menu-btn should have a top margin of 65px -->
<div class="foo-menu-btn">9</div>
<div class="foo-menu-btn">10</div>
<div class="foo-menu-btn">11</div>
<div class="foo-menu-btn">12</div>
<div class="foo-menu-btn">13</div>
<div class="foo-menu-btn">14</div>
<div class="foo-menu-btn">15</div>
<div class="foo-menu-btn">16</div>
</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.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
2 columns div for ie8 and ie7
in my website, I need to add inside a <div> (the black square, which is sort of a container) two columns of <div>s. you can understand it more easily from the drawing I attached.
it should:
support major browsers (Explorer 6 not needed)
be relatively simple
change the space size between the two columns, easily.
change the <div>s horizonal position.
Much thanks.
<style type="text/css">
#black {height:600px;width:500px;border:2px solid #000000;}
#black div{height:80px;width:150px;margin-top:20px;}
.green {border:2px solid #009900;float:left;margin-left:60px;}
.red{border: 2px solid #FF0000;float:right;margin-right:60px;}
</style>
<div id="black">
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
<div class="green"></div> <div class="red"></div>
</div>
HTML
<div class="container">
<div class="box col1"></div>
<div class="box col2"></div>
<div class="box col1"></div>
<div class="box col2"></div>
<div class="box col1"></div>
<div class="box col2"></div>
</div>
CSS
.container {width:100%; padding: 50px; border:2px solid #000; float: left;}
.box {width:100px;height:100px;margin: 10px;}
.col1 {border:2px solid red;float:left;clear:left;}
.col2 {border:2px solid green;float:left;}
Modify the .box padding to change the space size between the two columns
Modify the .container padding to change the horizonal position for the columns inside the container.
JSFiddle : http://jsfiddle.net/reB7v/
Try with this :
<style>
.outer{width:100%; padding: 20px; border:1px solid #000; float: left;}
.red{width: 20%; height: 40px; border:2px solid red; float: left; margin: 20px;}
.green{width: 20%; height: 40px; border:2px solid green; float: left; margin: 20px;}
.clear{clear:both;}
</style>
<div class="outer">
<div class="red"></div>
<div class="green"></div>
<div class="clear"></div>
<div class="red"></div>
<div class="green"></div>
</div>
Hope it will help you.
nesting columns could be devided into Grid system and Fluid grid system.
You can get info from Bootstrap and copy its nesting columns CSS.