Is there a way using purely CSS to style columns separately?

Question

On a project I'm working on, there are a few places where there are two columns of text. As this is content manageable, I don't really want to make two separate text areas for the user to fill out, but rather one which I split into two columns with column-count: 2 in CSS. The content will be inside a single p element.

The issue is that I need to style the second column slightly differently. I need to change text-align to right, whilst keeping the first column text-align left.

I know I could do this in PHP and/or JavaScript, but I'd prefer to do this using CSS alone if possible.

Markup:

<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab nostrum delectus iste sit officia! Molestiae ducimus, sunt omnis earum, vitae vel dolore blanditiis placeat, porro aliquid, non repudiandae recusandae quisquam sit enim. Aliquid placeat, obcaecati autem aut. Eum eaque nemo, voluptas repellat ab recusandae, culpa eos quam voluptates, molestias expedita ipsum debitis dolorem atque explicabo labore consequuntur cumque adipisci quos eveniet error. Sint, provident cum. Totam, nisi, quo. Hic, fugit, iusto. Veniam est nulla, debitis commodi provident fugiat quam earum incidunt, cum vel minima ipsum magnam cupiditate tenetur autem obcaecati aliquam soluta, repellat in quibusdam illo! Dicta numquam, saepe corrupti.</p>
</div> <!-- /.content -->

CSS:

.content p {
    column-count: 2;
}

as @sahildhir said , we need your current code, what you've tried etc. — Dev Man, Feb 03 '17 at 10:46
parent[selector] p:first-child{ text-align:left} , parent[selector] p:first-child{ text-align:right} — Sahil Dhir, Feb 03 '17 at 10:49
I've added some example markup. I did state in my question that the text would be inside a single `p` element. — Daniel Dewhurst, Feb 03 '17 at 10:51

score 1 · Accepted Answer · edited May 23 '17 at 12:33

1

As of now, there is no way to target columns in pure CSS. The closest you could get is using JavaScript to split it with new elements, or amend your markup.

This has been asked similarly before: https://stackoverflow.com/a/21238260/271271

edited May 23 '17 at 12:33

Community

1
1

answered Feb 03 '17 at 11:03

Mike

8,767
8
49
103

Exactly same answer... There is no way to target columns as if now. Here is the details on colum proeprties- http://www.w3schools.com/css/css3_multiple_columns.asp – Sahil Dhir Feb 03 '17 at 11:04
I know, that's why I linked to it. – Mike Feb 03 '17 at 11:04
Hopefully support gets added to CSS at some point. For now I'll probably go with a PHP approach, just because of my requirements. JS would also work well, as explained in the linked answer. – Daniel Dewhurst Feb 03 '17 at 11:05

score -3 · Answer 2 · edited May 23 '17 at 12:33

-3

Can you try using this:

table.secondcolumn td:nth-child(2) { text-align: left; }

or alternatively try this SO link

EDIT/Update: Apparently, there are no direct ways (via CSS) to style a specific text column via CSS.

edited May 23 '17 at 12:33

Community

1
1

answered Feb 03 '17 at 11:01

bbh

489
3
13

Is there a way using purely CSS to style columns separately?

2 Answers2