I am trying to select every other div with a class name. the issue is there are all in different parent div's. I've tried many things with sibling selection but have not yet found a solution. This is what I am looking for:
Add a margin of 30px to ever even div with the class name article
<div class="wrapper">
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--No Margin here-->
</div>
</div>
<div class="section">
<div class="article"><!--Add Margin here-->
</div>
</div>
</div>
I tried something like this but did not work:
.section > .article:nth-child(even){
margin-right: 30px;
}
Rather than select the even/odd .article elements, you need to select the even/odd .section elements.
.section:nth-child(even) > .article
{
/* Your css here */
}
Fiddle: http://jsfiddle.net/jakelauer/4PMbS/
Related
This question already has an answer here:
Why doesn't nth-of-type/nth-child work on nested elements?
(1 answer)
Closed 6 months ago.
So i have a div with 2 columns and images in both of them,and i want only the first image to have a margin.
HTML code:
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
CSS portion:
div.center img:first-child{
margin-left:100px;
}
The only problem is,the first child selector isn't working as intended and styles both of my images and give them a margin...How do i Fix this?
You css isn't working because both of your img elements are the first child inside of their parent.
What you maybe want is to add a margin to the image inside of the first column.
Something like
.column:first-child img {
margin-left: 100px;
}
Without seeing the rest of your html i cannot know if this will work correctly. It will only work if the first column is indeed the first child inside its parent.
Another solution would be for you to add classes to your images, something like
<div class="column">
<div class="center">
<img class="image image--with-margin" src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img class="image" src="assets/images/images/sliced-2.png">
</div>
</div>
and then
.image--with-margin {
margin-left: 100px;
}
you can wrap the columns in a container div and target only the first column
html:
<div class="container">
<div class="column">
<div class="center">
<img src="assets/images/images/crop-1.png">
</div>
</div>
<div class="column">
<div class="center">
<img src="assets/images/images/sliced-2.png">
</div>
</div>
</div>
and css:
.container .column:first-of-type img {
margin-left: 100px;
}
trying to target just the first .row but i seem to be targeting all rows. Why isn't first-child working? Here's my code:
<footer class="f1">
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-5">
<img src="/images/logo_footer.png" alt=""/>
</div>
<div class="col-md-7">
</div>
</div>
</div>
</footer>
CSS
.f1 .container .row:first-child {
padding-top:42px;
position:relative;
}
The pseudo selector :first-child is targeting the first child of each thing that matches the selector: .f1 .container .row. Since you have two instances of containers and each with a row as a child, the selector is affecting the first child of each. If you want only the row of the first container to be affected, you need to specify the first container as well. Ex: .f1 .container:first-child .row
Use the below css selector it should be affecting for all rows.
.f1 .container .row {
padding-top:42px;
position:relative;
}.
It should work.
This is my HTML and CSS code.
HTML
<section id="content">
<article id="areaRegister">
<div class="row-fluid">
<div class="span6">
<?php include 'formulario.php'; ?>
</div>
<div class="span6">
<div class="contentBarcode">
<div class="codigoBarras">
<header><h4>Código de barras generado!</h4></header>
<canvas id="registerBarcode" width="230" height="100"></canvas>
</div>
</div>
</div>
</div>
</article>
<article id="areaSearch">
<div id="toEdit" class="row-fluid">
<div class="span6">
<?php include 'formulario.php'; ?>
</div>
<div class="span6">
<div class="contentBarcode">
<div class="codigoBarras">
<header><h4>Código de barras generado!</h4></header>
<canvas id="editBarcode" width="115" height="70"></canvas>
</div>
Guardar
</div>
</div>
</div>
</article>
</section>
CSS
.row-fluid .span6:nth-child(1) {
padding-left: 10%;
}
For example, with the css above: The first span6 the first "row-fluid" has left padding of 10%, but the first span6 the second "row-fluid" does not have it, what happens? If it is the same style.
Also does not work if I want the second span6 each "row-fluid" has margin-left: 0; alone puts the first "row-fluid" but the second does not.
Other issue is when I try to apply any style to the first span6 of #toEdit:
#toEdit div:first-child{
padding-left: 10%;
}
It's supposed to apply to the first span6 but observing the code in the development tool of chrome and firefox, I realize that the top style applies to :/
FIXED
The problem was: With JS prepend a H3 to second "row-fluid" and bootstrap doesn't allow put any element between "row-fluid" div and "spanN" div
FIXED
The problem was: With JS prepend a H3 to second "row-fluid" and bootstrap doesn't allow put any element between "row-fluid" div and "spanN" div
Thanks anyway to #Miljan Puzović
I'm confused at a basic problem, and I'm not sure how to go about this --
Take a look at www.hncharity.com
If you look at the content div, it's slightly off center (It becomes more pronounced as you go into mobile view).
The div is structured like so:
<div class="container">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
The .content class has a white background, adds padding, and a margin all around the span10 offset1 div, to make the width appear smaller.
This is the css for content
margin:40px;
padding:40px;
position:relative;
margin-top:-200px;
z-index:1201;
background-color:white;
As you can see, the content does not appear to be centered. What would I do to fix this?
you missed to add a container with class row before span and after container.
Correct way:
<div class="container">
<div class="row">
<div class="span10 offset1">
<div class="content">
....
</div>
</div>
</div>
</div>
I'm having problems getting several divs to function as two columns. In the code below I want the container (or content) and right to act as two columns.
Both need borders (non-image) where the border in between both should be the same visual width as the outer borders.
Both columns need to have the same height between top and bottom
right should be fixed size
Is this even possible without changing the HTML?
Take the following HTML:
<body>
<div id="top"></div>
<div id="container">
<div id="content">
</div>
</div>
<div id="right">
</div>
<div id="bottom"></div>
</body>
This will do what you want.
Markup
<body>
<div id="top">top</div>
<div id="container">
<div id="content">
content
</div>
<div id="right">
right
</div>
<br style="clear:both" />
</div>
<div id="bottom">bottom</div>
</body>
CSS
#container {border:1px solid blue;}
#content, #right {float:left;}
#content {width:400px; border-right:1px solid blue;}
Doesnt anser your issue fully, as your question is a tad lightweight, but you can position divs however you want. Fiddle here: http://www.jsfiddle.net/ozzy/F3K8k/
Have updated fiddle: http://www.jsfiddle.net/ozzy/F3K8k/1/