I have a parent div, that holds three div's. They are basically columns. I need to remove the margin on the last one but can't get the right selector
HTML:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox"></div>
<!--/ productContainer --></div>
Here's the CSS:
.productContainer {
width: 980px;
height: 400px;
display: block;
float: left;
}
How do you target the third child div of a parent? this should work no?
.productContainer > .productBox {
width: 320px;
height: 400px;
display: block;
float: left;
margin: 0 10px 0 0;
}
.produtContainer > .productBox nth:child(3) {
margin-right: 0;
}
While you can use the :last-child selector, it's not going to work in any version of IE before 8. Generally what I do in this situation is add a last class to the last element in the list:
<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox last"></div>
And then add this rule below the .productContainer .productBox rule in the stylesheet:
.produtContainer .last {
margin-right: 0;
}
.productContainter div:last-child
You can do :first-child or :last child to target the first and last element.
compatibility: http://www.quirksmode.org/css/contents.html
You can use :last-child selector for the rule
.productContainer div:last-child
{
// rule
}
http://www.quirksmode.org/css/firstchild.html
You can use the last-child pseudo-selector in this case...
.productContainer > .productBox:last-child {
margin-right: 0;
}
Note: This will not work in IE8 and older, as this is a part of CSS3. For something more portable, you might want to try this...
<div class="productBox last"></div>
.productContainer > .productBox.last {
margin-right: 0;
}
Related
I am trying to add different padding to subsequent elements in a div. My DOM looks pretty simple.
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
...
</div>
So I would like for my first element to have 0 padding, my second 15, third 30 etc.
Using LESS, how could I make this work?
I have tried:
.parent div:nth-of-type(n) {
padding-left: n*15px;
}
Thank you!
I suppose you want to achieve a stair visually. In this case you can do it like below:
.parent {
line-height: 1.2em;
}
.parent>div:not(:first-child)::before {
content: "";
float: left;
width: 15px; /*your padding*/
height: calc(1.2em + 2px);
}
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
<div>45</div>
<div>60</div>
<div>75</div>
</div>
Using less(but you have to set the num of elements):
.parent (#indexstart,#index) when (#indexstart < #index ){
div:nth-child(#{indexstart}){
padding-left: (#indexstart - 1) * 15px;
}
.parent (#indexstart + 1,#index);
}
.parent (1,4);
See example
I want to select the first and the last child with CSS but it does not work. Please take a look at my Fiddle and help me:
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
https://jsfiddle.net/rbw8dpsb/1/
I advise you to add a container as in your code they are childs of body BUT you don't know the last-child or the first-child of body as you may have other elements like script tags or other tags dynamically added (like in the snippet here or with jsfiddle or any other online coding tools).
.area {
height: 100px;
width: 100px;
}
.area:first-child {
background-color: red;
}
.area:last-child {
background-color: green;
}
<div>
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
</div>
Here is a screenshot to show what is inside your body when you run the snippet:
As you may clearly notice, there is a div added at the end which is the last-child of the body. Adding a container will avoid you dealing with random settings and hidden elements added.
If you don't want to let all that divs in another structure you should use first-of-type and last-of-type instead of first-child and last-child
.area {
height: 100px;
width: 100px;
}
.area:first-of-type {
background-color: red;
}
.area:last-of-type {
background-color: green;
}
<div class="area">1</div>
<div class="area">2</div>
<div class="area">3</div>
<div class="area">4</div>
As Temani Afif pointed, this solution is arbitrary and may not work in all the situations. As shown, it is not properly working on the code snippet but it does on JSFiddle for example. I.E. https://jsfiddle.net/vm1scerv/
Lets say I have the following html:
<header class="header">
<div class="title">
<h1>Home</h1>
</div>
<div class="logo">
<img src="#" alt="Logo">
</div>
<div class="account">
<div class="options">
</div>
<div class="search">
</div>
</div>
</header>
And I have the following SCSS:
header {
height: 4.1rem;
div {
width: 33%;
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
&.title {
h1 {
font-weight: normal;
font-size: 3rem;
padding: 0;
margin: 0;
}
}
&.logo {
text-align: center;
}
&.account {
}
}
}
Now the problem that I have is that divs options and search are 33% percent of account which is logic as I have div {width: 33%}. I know I can select direct child elements with:
header {
> div {
}
}
But this doesn't help even if I put the > infront of all other classes. I also know I can say that the width should be 0 or what ever again in .account but I would like to prevent this.
Try this:
...
& > div {width: 33%;}
div {
float: left;
height: 4.1rem;
line-height: 4.1rem;
color: #fff;
...
Take out div width and apply it only on direct children. Leave rest as is.
Here is quick fiddle (remove .option and .search styles later, its only for visualisation).
Please edit your question and better explain what exactly you want to achieve.
Use the & with > inside the parent element like this:
.services {
& > div {
margin-bottom: 25px;
}
}
I am not certain I understand you. But I think you want a combination of direct children and child pseudo selectors, in pure CSS:
header > div:first-child {
}
Or, for the second div:
header > div:nth-child(2) {
}
You could also use the not selector:
header > div:not(.account) {
}
to exclude any unwanted div's.
I'm looking for the simplest way to break up a collection of inline-blocked divs without resorting to extra markup (such as br).
I started off naively thinking that the following would do the trick except that 'four' ends up on a line of its own as well which I don't really understand.
.inline {
display:inline-block;
}
.newline {
display:block;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
I have tried solutions using :after/:before found here on Stackoverflow but these only work for me if my elements are inline instead of inline-block.
Regrettably I also need to support IE6!
Attempt with floats
This example below does not display properly in IE 6
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.newline {
clear: left;
}
<div class="inline">one</div>
<div class="inline">two</div>
<div class="inline newline">three</div>
<div class="inline">four</div>
The result in IE 6
For IE6 and other old browsers you need to add a clear line for example using this code:
<div class="inline">one</div>
<div class="inline">two</div>
<div class="visualClear"></div>
<div class="inline">three</div>
<div class="inline">four</div>
.inline {
float: left;
width: 50px;
height: 50px;
background: #F00;
}
.visualClear {
clear: both;
display: block;
}
I know that it isn´t very pretty but it will work for you.
I would like to know how to update image A when I hover over image B using only CSS, is it possible? if not how will I do that using only pure JavaScript (no library). But css is really what I want to use....
This depends entirely on your mark-up, as I pointed out in the comments. In the absence of seeing any mark-up to work with, I can only post some general suggestions; however it's important to note that the element you want to affect (F) must appear later in the DOM (be a child of the element F, or be subsequent sibling, or descendant of a subsequent sibling) than the element E with which you want to interact.
That said, the following approaches will work, with the associated mark-up:
Sibling-based selection:
Hovering over the first img inside of #a toggles the display of the subsequent img elements, using the E ~ F (general sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second,
#a img.first:hover ~ img.second {
display: none;
}
#a img:hover ~ img.first {
display: none;
}
#a img:hover ~ img.second {
display: inline-block;
}
JS Fiddle demo.
Hovering over #a changes switches the display of the .first and .second images inside of #b, using the E + F (immediate sibling) combinator:
<div id="a">
<img src="http://www.lorempixel.com/200/400/nature" />
</div>
<div id="b">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a,#b {
float: left;
border: 1px solid #000;
padding: 0.2em;
}
img.second {
display: none;
}
#a:hover + #b img.first {
display: none;
}
#a:hover + #b img.second {
display: inline-block;
}
JS Fiddle demo.
Descendant-based selection:
Using the E F general descendant combinator (I'm not actually entirely sure a space character is a combinator, but regardless...it's based on F being a descendant of E):
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
#a img.second {
display: none;
}
#a:hover img.first {
display: none;
}
#a:hover img.second {
display: inline-block;
}
JS Fiddle demo.
Using E > F the immediate-child/immediate-descendant combinator:
<div id="a">
<img class="first" src="http://www.lorempixel.com/200/400/people" />
<div>
<img class="second" src="http://www.lorempixel.com/200/400/sports" />
</div>
</div> div {
display: inline-block;
}
img {
display: none;
border: 1px solid #000;
padding: 0.2em;
}
#a > img {
display: inline-block;
}
#a:hover img {
display: inline-block;
}
JS Fiddle demo.
There's also the chance to use pseudo-elements and css-generated content (in compliant/up-to-date browsers):
<div id="a"></div>
#a {
width: 200px;
height: 400px;
background-image: url(http://www.lorempixel.com/200/400/people);
background-repeat: none;
background-position: 50% 50%;
position: relative;
}
#a:hover::after {
content: url(http://www.lorempixel.com/200/400/animals);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 100%;
}
JS Fiddle demo.
In your particular case it's easy, since #bg is a child of #hv
Just change your hover selector from what you have to this:
#bg:hover #hv {...}
See my fork of your fiddle here: http://jsfiddle.net/xJSQt/
To update the background position on the inner element #hv when hovering the outer element #bg, you can:
See this Working Fiddle Example!
#bg:hover #hv {
...
}
Simple. Let´s suppose you have a div like this:
<div class="myImage">
So, in CSS you set the normal background image, and then you use the :hover pseudo-element to change it to your desired rollover image. Something like:
.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/