Target specific column (using CSS multi-columns)

Question

I got one text with two columns (via column-count property) and I'd like to target the second column only so I can apply a red color on it for example. How can I do it, in CSS or Javascript ? I know I could go through the creation of two containers instead so I would just have to manipulate the second div, but in my case I need to put all the text in one div.

HTML :

<div>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat. <br/>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</div>

CSS

div{
column-count:2;
}

Hard to say with so few code but if you have only two column and you want to only affect the second one, you can use the last-child CSS selector. — Gaetan C., Jul 30 '20 at 09:21
Does this answer your question? [targeting nth column(made by column-count)](https://stackoverflow.com/questions/20955460/targeting-nth-columnmade-by-column-count) — alotropico, Jul 30 '20 at 09:30
Hard issue for me, there's no any selector in this div, I could create two
selector, so I would just have to do p:last-child() to manipulate it but the customer would have to create two text separately so one for each selector... since there is no nth-column property or something like that — elisa, Jul 30 '20 at 09:47

score 0 · Answer 1 · answered Jul 30 '20 at 10:00

Here is little trick but It's not the best way to targeting the column and I guess there is no special way of targeting the one column according to this answer

div {
  column-count: 2;
  position: relative;
}

div::before {
  content: '';
  background: yellow;
  mix-blend-mode: color;
  height: 100%;
  width: 50%;
  position: absolute;
}

<div>Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens
  et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat. <br/>Hanc regionem praestitutis celebritati diebus invadere
  parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</div>

to understand it clearly if you have more that two columns it won't work so that's why you have to do this here

div:before{
        width: calc(100% / n);
    }

n is number of columns to target one column only or if you want to target many you could use calculations on width

does my answer helped you? – Umutambyi Gad Aug 02 '20 at 21:40 — Umutambyi Gad, Aug 02 '20 at 21:40

black blue · Answer 2 · 2020-07-31T14:28:10.507

Bad news - it is not possible, maybe someday.

I understand you want to split the text colour, you have a reason and an idea... if any trick or workaround works - go ahead!

Or maybe your intended goal can be achieved by changing the background? Different colour for each column?

.gradient{ background: linear-gradient( to left, lightblue, white, pink);}

One more thing - if it is a text block it should be a <p> not <div> - for blind people screen readers it is important

score -1 · Answer 3 · answered Jul 30 '20 at 09:28

You can do it like this, it not select directly the second line but it works :

.col:not(first-line) { 
   color:green;
 } 

.col:first-line{
  color:black;
}

<div class="col">Auxerunt haec vulgi sordidioris audaciam, quod cum ingravesceret penuria commeatuum, famis et furoris inpulsu Eubuli cuiusdam inter suos clari domum ambitiosam ignibus subditis inflammavit rectoremque ut sibi iudicio imperiali addictum calcibus incessens et pugnis conculcans seminecem laniatu miserando discerpsit. post cuius lacrimosum interitum in unius exitio quisque imaginem periculi sui considerans documento recenti similia formidabat. <br/>Hanc regionem praestitutis celebritati diebus invadere parans dux ante edictus per solitudines Aboraeque amnis herbidas ripas, suorum indicio proditus, qui admissi flagitii metu exagitati ad praesidia descivere Romana. absque ullo egressus effectu deinde tabescebat immobilis.</div>

Target specific column (using CSS multi-columns)

3 Answers3