Select a particular column (utilizing CSS multi-column functionality)

Question

Select a particular column (utilizing CSS multi-column functionality)

I want to style the second column in a text block with two columns using CSS or JavaScript. How can I achieve this without creating separate containers for each column? I'm aware that I could create two containers and target the second one for styling, but I need to keep all the text within 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;
}

javascript html css

Answer 1

Answer №1

There's a little trick for targeting a specific column within a multi-column layout, but it may not be the most optimal method. According to this answer, there isn't a straightforward way to target a single column.

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

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

<div>Lorem ipsum dolor sit amet...</div>

If you have more than two columns, the above method won't work effectively. In such cases, you can use the following approach:

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

You can replace n with the number of columns you want to target, allowing you to style a single column or apply calculations for multiple columns.

Answer 2

There's a little trick for targeting a specific column within a multi-column layout, but it may not be the most optimal method. According to this answer, there isn't a straightforward way to target a single column.

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

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

<div>Lorem ipsum dolor sit amet...</div>

If you have more than two columns, the above method won't work effectively. In such cases, you can use the following approach:

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

You can replace n with the number of columns you want to target, allowing you to style a single column or apply calculations for multiple columns.

Answer 3

Answer №2

Unfortunately, at this time it is not possible, but perhaps in the future.

I see that you are interested in splitting the text color, you have a purpose and a concept... if there is any clever solution or workaround - give it a try!

Alternatively, could your desired outcome be accomplished by altering the background? Different colors for each column?

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

Also, just a heads up - if it is a block of text it should be wrapped in a <p> tag instead of a <div> tag - this is crucial for individuals using screen readers.

Answer 4

Unfortunately, at this time it is not possible, but perhaps in the future.

I see that you are interested in splitting the text color, you have a purpose and a concept... if there is any clever solution or workaround - give it a try!

Alternatively, could your desired outcome be accomplished by altering the background? Different colors for each column?

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

Also, just a heads up - if it is a block of text it should be wrapped in a <p> tag instead of a <div> tag - this is crucial for individuals using screen readers.

Answer 5

Answer №3

If you want to achieve this effect, you can try the following CSS code snippet. It may not directly target the second line, but it should work:

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

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

<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra dapibus eros, at fermentum metus pharetra et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies vehicula eros, vel sagittis libero laoreet eget. Nam condimentum mauris ac orci ultricies, ac hendrerit eros bibendum. Nunc posuere ultricies tortor vitae efficitur. Suspendisse eget urna non odio fermentum fringilla vel ac nisi.</div>

Answer 6

If you want to achieve this effect, you can try the following CSS code snippet. It may not directly target the second line, but it should work:

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

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

<div class="col">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris viverra dapibus eros, at fermentum metus pharetra et. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ultricies vehicula eros, vel sagittis libero laoreet eget. Nam condimentum mauris ac orci ultricies, ac hendrerit eros bibendum. Nunc posuere ultricies tortor vitae efficitur. Suspendisse eget urna non odio fermentum fringilla vel ac nisi.</div>

Select a particular column (utilizing CSS multi-column functionality)

Answer №1

Answer №2

Answer №3

Similar questions

Navigating through the fetch API request when using express js

What is the best way to trigger a function once all asynchronous calls within a loop have been completed?

Utilize a function within an AngularJS directive

Exploring the Functions and Applications of Headers in Javascript

Displaying the HTML code for a dynamically generated table

Enhancing Angular 4 classes with dependency injection techniques

Fix issue with nested form in Rails 3.0.9 where remove_fields and add field link functionalities are not functioning properly

Error: Unable to execute decodeHtml because it is not recognized as a function

Angular material is experiencing an issue where content is being cut off or

jQuery functions smoothly on Firefox, but encountering issues on Chrome

What could be causing the black spaces to appear after my text in HTML?

using ng-class or ng-style for displaying error messages when validating a text area content

including a content tag into an input field within a template

What is the best method for applying a gradient color to the parent class in CSS using pseudo classes (before and after)?

Is it possible to create two header columns for the same column within a Material UI table design?

Obtaining the selected date value from a Vue.js datepicker

Tips for ensuring your background image is fully displayed and covers the entire size

Adding Options on the Fly

Please ensure that all fields in the form are filled out before clicking the enable button

ul background transparency only works with absolute positioning if using a Transparent PNG