Get specific sibling via pseudo selectors CSS

Question

I have been reading trough many examples on how to style specific siblings via pseudo selectors like

http://andr3.net/blog/post/142

http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ Can CSS detect the number of children an element has?

But the problem I am facing is particular. I am working on a grid system that can contain up to 8 divs( col- ) inside. Their widths are automatic based on the class you apply.

Here is the full size demo http://fiddle.jshell.net/6Wb6W/1/show/light/

this is css and markup http://jsfiddle.net/6Wb6W/1/

Now on browser width 979px , I want to drop(move under make 100% wide) ;

3rd column in 3 column grid and make it 100% wide 
5th column in 5 column grid and make it 100% wide 

I was previously doing this via js and counted how many columns are inside the row and change the width or apply new class to the one you want, but I would love to do this via css only.

I have tried with pseudo classes nth:child on 3 or 5 grid columns. Any combination I did messed up the 6 and 8th grid column a swell. Tested all possible options that I could think of here http://css-tricks.com/examples/nth-child-tester/# and was not able to find a solution.

I do not wish to add any additional div id names and target them like that. Already had such "solutions" and js mambo jumbo in the past but would really like to get rid of all of that and use pure css only.

Any help is appreciated.

Solution: Thnx to chandu we got a winner. http://fiddle.jshell.net/6Wb6W/8/show/light/ Robust mobile ready grids layout that fits almost any possible layout option you might need. This will become a part of YJSG 2.0 http://www.youjoomla.com/yjsg-framework-blog/yjsg-v2-0-0-white-paper.html

Answer 1

I think this will help full to you.

use display: none; css for 3rd column 3rd div and 5th column 5th div in responsive of 979px

@media screen and (max-width: 979px) {

    [class*='yjsg-col-'] {
        width: 50%;
    }
    .yjsg-col-1 {
        width:100%;
    }
    [class*='yjsg-col-1-']:nth-child(odd):last-child{
    /*color:red;*/
    display:none;
  }
}

updated Fiddle

Note : In fiddle I have highlighted the selected columns with red color please note that one

Answer 2

Unless I have misunderstood the question, the selected answer looks a bit "overcomplicated" to me ...! ;-)

And of course you could use the nth-child() selector.

Now on browser width 979px , I want to drop;

3rd column in 3 column grid and make it 100% wide
5th column in 5 column grid and make it 100% wide

@media screen and (max-width: 979px) {
    ...
    .yjsg-col-1-3:nth-child(3) {
        width:100%;
    }
    ...
    .yjsg-col-1-5:nth-child(5) {
       width:100%;
   }

Not sure what you meant by drop!?
But if you meant "hide/ do not show" the respective column, then you could simply set display: none; for these columns in the above CSS.

As you already know CSS-TRICKS, also have a look at: :nth-Tester!

And here is your updated JSFiddle