4

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

Community
  • 1
  • 1
Benn
  • 4,840
  • 8
  • 65
  • 106
  • What does the rest of your CSS to format the columns look like? Is it maybe using more specific selectors, that assign a different width than the ones in your media query? – CBroe Apr 29 '14 at 20:37
  • I updated the post. there is nothing special and nothing more , 8 css class names with a specific width , like the example link I posted from css tricks. – Benn Apr 29 '14 at 20:37
  • Looks good to me: http://jsfiddle.net/cB2t2/ 3rd and 5th col 100%, rest 50%. Please elaborate on desired result. – tobiv Apr 29 '14 at 20:54
  • @tobiv, make 8 cols, http://jsfiddle.net/cB2t2/1/embedded/result/ and it wotn work as desired , try making row with 2 , 3, 5 6 and 8 colomns, resize browser , the result will not be as it should, your 5,6 and 8 will have 100% col in between – Benn Apr 29 '14 at 21:04
  • I think probably what you're looking for is `nth-child(3)`, with `3n` it will match multiples of 3. – tobiv Apr 29 '14 at 21:26
  • Complex grid logic doesn't work well in the current CSS3 state. That might become slightly easier with the [subject selector in CSS4](http://www.w3.org/TR/selectors4/#subject). Currently, I'd suggest JS as the most reliable approach, or to use a pre-processor such as [Sass](http://sass-lang.com/) or [Less](http://lesscss.org/) if you truly want pure CSS logic ([SingularityGS](http://singularity.gs/) is a really nice Compass-Sass framework). You also have to consider [browser support for the nth-child selector](http://caniuse.com/#search=nth-child) – Ian Clark May 03 '14 at 09:28
  • Let me see if I got this. You want to target the 3th column in the 1-3 grid and the 5th column in the 1-5 grid, without affecting any others? – Andrei May 03 '14 at 09:29
  • @Andrei, exactly. and only via css pseudo if possible – Benn May 03 '14 at 09:49
  • Why don't you just target `.yjsg-col-1-3` and `.yjsg-col-1-5` then ? Or those classes will not be present ? Another question is, will you always have 8 rows (all 8 grid type) ? – Andrei May 04 '14 at 20:09

2 Answers2

5

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

chandu
  • 2,276
  • 3
  • 20
  • 35
  • Now that is what I call help ! here is desired layout http://fiddle.jshell.net/6Wb6W/8/show/light/ – Benn May 04 '14 at 20:22
3

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

Community
  • 1
  • 1
Netsurfer
  • 5,543
  • 2
  • 29
  • 34
  • by drop I meant go under and be 100% wide, sorry for trowing you off. your example does not work , it messes up the grid take a look http://fiddle.jshell.net/6Wb6W/9/show/light/, here is the one that works http://fiddle.jshell.net/6Wb6W/8/show/light/ – Benn May 08 '14 at 16:59
  • @Benn In how far does my example not work? It only demonstrates how to select the appropriate elements by CSS. And it works perfectly well. Of course you have to add media queries. And possibly change the width of the other columns, e.g. for the five columns to 25% for the first four (and the 100% for the fifth). – Netsurfer May 08 '14 at 19:20
  • it does work, your fiddle was messed up , the r3d one is already dropped , but yours targets 3 and 5 plus the code is 2 liner where chandu made a one liner and matches all odds and their last one so there cant be a miss. lest say I add 1-7 than I would have to re declare it. – Benn May 08 '14 at 19:29
  • OK, but that's another question ...! ;-) If you want to target every last column in all rows with an odd column count then chandu's selector combination is pretty useful. I mainly answered for the archive to demonstrate that the `:nth-child()` selector also works in cases like yours. – Netsurfer May 08 '14 at 19:58