2

I've got a 2 column layout blog and i'm using the column-count css property, but the design requires that images and blockquotes in the first column to jut out to the left side (margin-left: -20px), and the 2nd column applies the same thing but on the right side (margin-right:-20px).

Is there a css selector for the 1st or last column? Is it possible to do that or would i have to try something else?

Mohamed Hamad
  • 93
  • 2
  • 9
  • 2
    No, so far as I know there's no selector for specific columns in CSS as yet; the spec is here: "[CSS Multi-column Layout Module](http://www.w3.org/TR/css3-multicol/)." – David Thomas Dec 30 '13 at 23:02

1 Answers1

0

The closest thing you can get is using td:first-child and td:last-child. Demo

Example: 

td { width:100px; height:50px; background:blue; }
td:first-child, td:last-child {
    background:red;
}

If for some reason you were wanting a specific column not on the outside you could use td:nth-of-type(n) or, if there are only td children, td:nth-child(n), but this requires you know how many tds there are in the row. To do anything more specific you'd have to use javascript

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • the issue i have is that this is a responsive layout, where in mobile view i would have one column, and anything larger than that would be 2 columns. I'm using the column-count property to achieve this. Are there any other options besides tables or column-count? – Mohamed Hamad Jan 03 '14 at 06:35
  • There are other options, but that is the easiest way most likely. If you'd like you could share a demo with us and we could work with it – Zach Saucier Jan 04 '14 at 13:43