CSS:
.banner:nth-of-type(1) {background-color:red;}
.banner:nth-of-type(2) {background-color:blue;}
HTML:
<div id="container">
<div class="copy">copy 1</div>
<div class="banner">banner 1</div>
<div class="copy">copy 1</div>
<div class="banner">banner 2</div>
<div class="copy">copy 1</div>
<div class="banner">banner 3</div>
<div class="banner">banner 4</div>
</div>
Shouldn't the CSS be counting the .banner elements regardless of the other sibling elements?
I'm expecting banner 1 to have a red background and banner 2 to have a blue background, but getting banner 1 with a blue background and banner 2 with no background -- I would expect this if I were using nth-child(n). Check my fiddle here: http://jsfiddle.net/JjNBV/3/
nth-of-type applies to the type of element -- ie <div> in this case, not to the class.
.banner:nth-of-type(1) doesn't match anything because none of the .banner elements is the first div inside the container.
.banner:nth-of-type(2) matches the first .banner element because it is the second div inside the container.
There isn't a CSS3 selector that matches classes in the way you're expecting.
If you want this kind of behaviour, you will need to use different element types for your banners and copy, then nth-of-type will work for you as you want. HTML5 provides several elements that may meet your needs in this regard.
Which elements you use would depend on what you're using them for; your supplied code doesn't give sufficient clues for me to give you a definitive recommendation, but here's your code with the copy elements changed from <div> into <article> elements...
<div id="container">
<article class="copy">copy 1</article>
<div class="banner">banner 1</div>
<article class="copy">copy 1</article>
<div class="banner">banner 2</div>
<article class="copy">copy 1</article>
<div class="banner">banner 3</div>
<div class="banner">banner 4</div>
</div>
With this change, your existing CSS should now work as you expect. (and here is the jsFiddle to show it working)
CSS4 does have a selector nth-match() which may possibly also do what you're looking for, but no browsers support this selector (nor are any looking likely to in the near future), so that's not really an option for the time being.
Try
.copy:nth-child(n+1) {background-color:red;}
.banner:nth-child(n+2) {background-color:blue;}
Fiddle here
Related
I'm using Bootstrap and I want to change first column the distance from left. This is illustrated in this picture:
My code:
<div class="container">
<div class="row">
<div class="col-sm-1">
<div class="panel panel-default">
<div class="panel-body">A Basic Panel</div>
</div>
</div>
<div class="col-sm-8">.col-sm-7</div>
<div class="col-sm-1">.col-sm-1</div>
</div>
</div>
I try with margin-left, padding-left, but I don't found where it's need change.
Change
<div class="container">
to
<div class="container-fluid">
Fiddle here: https://jsfiddle.net/DTcHh/23360/
The .container class adds a max width to that element, and centers it on the page. If you want col-sm-1 all the way to the left, you'll want to remove/adjust how you're using the .container class.
On top of that, .row and .col-sm-* come with some additional margin/paddings. Try using chrome inspector to look at your elements on the page and see how/why they are laid out the way they are.
FMI, old flexbox doesn't support flex-wrap property. There's no wrap in old browsers such as Android 4.3 and Safari 6.
It shows some flex container children in one line and crop the remaining ones.
What are the alternative/fallback solutions?
http://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox
Just don't use Flexbox and try to solve your layout-problem with CSS that's got a lot wider cross-browser-support (especially backwards) and degrades gracefully for non-supporting browsers without the need for Javascript to somehow make it work.
You can use Modernizr Script to detect whether browser supports flex-wrap property, then you can create fallback solution.
Link to official page: https://modernizr.com/docs
Great article: http://www.westofwonder.com/2014/02/cross-browser-flex-box-for-responsive-design/
If you want flex-wrap alternative, you should use display: inline-block;. However display: inline-block; isn't perfect. So, you should devise the markup like the following code.
<div class="list">
<div class="list__flex-container">
<div class="list__flex-item">Item 1</div>
<div class="list__flex-item">Item 2</div>
<div class="list__flex-item">Item 3</div>
</div>
<div class="list__flex-container">
<div class="list__flex-item">Item 4</div>
<div class="list__flex-item">Item 5</div>
<div class="list__flex-item">Item 6</div>
</div>
</div>
I have the following divs:
<div class="c">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>//this
</div>
<div class="c">
<div class="a"></div>//this
<div class="a"></div>//this
<div class="a"></div>
</div>
<div class="c">
<div class="a"></div>
<div class="a"></div>
<div class="a"></div>
</div>
Is there a CSS selector that lets me select .a elements situated in 3rd,4th and 5th position of the .a matched results?
Something similar to eq() in jQuery.
:nth-child() is not of help here as this is just a simplified case.
This is a fiddle with the results using jQuery. I want to know if there is a solution using just CSS.
No, there is no equivalent to jQuery's :eq() in CSS. In plain English, there is no selector for the nth element matching a complex selector (in your example, the 3rd, 4th and 5th elements matching the selector .a).
Just for the sake of completeness (because someone is going to say "well, actually..."), the specific elements are, of course, reachable with
.c:nth-child(1) > .a:nth-child(3), .c:nth-child(2) > .a:nth-child(1), .c:nth-child(2) > .a:nth-child(2)
But that assumes that is exactly how your markup appears, which is seldom ever a realistic assumption to make, especially if the page is dynamically generated.
In the very unlikely event that your markup is static and you can rely on the 3rd, 4th and 5th .a elements being in those exact positions, by all means use the selector above. But if their positions or structure can vary, then you will need other ways to identify them in CSS, for example with an additional class name.
.c:nth-child(1) .a:nth-child(3) { background:yellow; }
.c:nth-child(2) .a:nth-child(2), .c:nth-child(2) .a:nth-child(1) { background:yellow; }
<div class="c">
<div class="a">c1-a1</div>
<div class="a">c1-a2</div>
<div class="a">c1-a3 //this</div>
</div>
<div class="c">
<div class="a">c2-a1 //this</div>
<div class="a">c2-a2 //this</div>
<div class="a">c2-a3</div>
</div>
<div class="c">
<div class="a">c3-a1</div>
<div class="a">c3-a2</div>
<div class="a">c3-a3</div>
</div>
We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.
In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.
That's why in the HTML these elements are declared as follows:
<div id="container">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.
The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.
Note: the height of the elements is unknown, and the width is percentual.
EDIT: For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. This fiddle shows what we don't want.
You could float A, C and D to the right. However you might need to apply overflow:auto to B and E. Also note, that if B is higher than A, C is getting pushed down to align accordingly.
Fiddle
Could you do something like this?
<div id="container">
<div id="A">A</div>
<div id="B" class = "left">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E" class = "left">E</div>
</div>
<style>
.left { float:left; }
</style>
You can just set float:left in the media query you want and ignore it in the other one.
Edit:
In response to OP's feedback that B and D were not sitting directly on top of each other, revising the code to float: right instead fixes this. ie
<div id="container">
<div id="A" class = "right">A</div>
<div id="B" >B</div>
<div id="C" class = "right">C</div>
<div id="D" class = "right">D</div>
<div id="E" >E</div>
</div>
<style>
.right { float:right; }
</style>
For the normal layout, you should do it like this.
Both divs should be left floated.
<div id="container1">
<div id="left">
<div id="B">B</div>
<div id="E">E</div>
</div>
<div id="right">
<div id="A">A</div>
<div id="C">C</div>
<div id="D">D</div>
</div>
</div>
The problem is that the mobile version uses another arrangement.
So one solution is to make onther version for the mobile page and hide #container1 (and vice versa for the other site).
<div id="container2">
<div id="A">A</div>
<div id="B">B</div>
<div id="C">C</div>
<div id="D">D</div>
<div id="E">E</div>
</div>
I did the below it worked,
<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
result: Two boxes inside with 10px left and right margin appeared.
Question 1:
Below does not work, one box is pushed below another why? What should i do to fix it?
<div class="container_12">
<div class="grid_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
</div>
Question 2:
With the MarkUp 1, which i stated at start of question i substitued the text with Google visualization charts, they behave like Question1. One chart is pushed below another.
Question 3
Do i always have to specify clears after the the grids ads up to containers width. for example,
<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
<div class="clear"></div>
<div class="grid_12"></div>
</div>
Question 4
I have heard that clearfix does the same as clearing, where do i use it on the parent container or the divs inside them?
Question 1
You need to add a class of "alpha" on the first div to remove the left margin and a class of "omega" on the last div to remove the right margin.
Whenever you are nesting divs you need to add alpha and omega classes to the first and last divs.
<div class="container_12">
<div class="grid_12">
<div class="grid_6 alpha">Some Text</div>
<div class="grid_6 omega">Some Text</div>
</div>
</div>
Question 2
This may be because the content ie the charts are wider than the div.
Question 3
Use a clear div when only when you want to clear all the elements above it.
Question 4
Whenever you have a div with floated elements inside it you can give it a class of clearfix to clear everything inside.