Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Question

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Is there a way to achieve alternating row shading within a wrapped paragraph element without using the :nth-child technique? For instance, if we have:

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
</p>

Some browsers may automatically create a soft return after "hello" and "world", resulting in all rows looking the same when rendered.

I'm looking to have rows 0 and 2 shaded differently than row 1, similar to how table rows can be styled with tr:nth-child(even) for alternating colored rows. Is there a solution for this scenario, or is there a practical alternative approach using different elements that doesn't involve breaking up the paragraph and inserting it into a table?

css

Answer 1

Answer №1

Apply a repeating gradient color effect:

p {
  line-height:1.2em; /* height of one line */
  color:transparent;
  background:repeating-linear-gradient(180deg, red 0 1.2em,grey 0 2.4em);
  -webkit-background-clip:text;
  background-clip:text;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- hello
row 4 -- world
and so on
</p>

Use another syntax for the same effect:

p {
  line-height:1.2em; /* height of one line */
  color:transparent;
  background:linear-gradient(180deg, red 50%,grey 0) 0 0/100% 2.4em;
  -webkit-background-clip:text;
  background-clip:text;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- hello
row 4 -- world
and so on
</p>

Answer 2

Apply a repeating gradient color effect:

p {
  line-height:1.2em; /* height of one line */
  color:transparent;
  background:repeating-linear-gradient(180deg, red 0 1.2em,grey 0 2.4em);
  -webkit-background-clip:text;
  background-clip:text;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- hello
row 4 -- world
and so on
</p>

Use another syntax for the same effect:

p {
  line-height:1.2em; /* height of one line */
  color:transparent;
  background:linear-gradient(180deg, red 50%,grey 0) 0 0/100% 2.4em;
  -webkit-background-clip:text;
  background-clip:text;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- hello
row 4 -- world
and so on
</p>

Answer 3

Answer №2

Transforming your paragraph into an unordered list using a programmatic JavaScript approach, detecting line break \n symbols.

var pRows = document.getElementById('p-rows');

pRows.innerHTML = pRows.innerHTML
  .split('\n')
  .join('</li><li>')
  .replace(/^<\/li>/, '<ul>')
  .replace(/<li>$/, '</ul>')

#p-rows ul {
  list-style: none;
  padding: 0;
}

#p-rows li:nth-child(odd) {
  background: #ddd;
}

<p id="p-rows">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- ???
row 4 -- ***
</p>

Answer 4

Transforming your paragraph into an unordered list using a programmatic JavaScript approach, detecting line break \n symbols.

var pRows = document.getElementById('p-rows');

pRows.innerHTML = pRows.innerHTML
  .split('\n')
  .join('</li><li>')
  .replace(/^<\/li>/, '<ul>')
  .replace(/<li>$/, '</ul>')

#p-rows ul {
  list-style: none;
  padding: 0;
}

#p-rows li:nth-child(odd) {
  background: #ddd;
}

<p id="p-rows">
row 0 -- hello
row 1 -- world
row 2 -- !!!
row 3 -- ???
row 4 -- ***
</p>

Answer 5

Answer №3

It can be quite challenging, but here's a solution that might work:

p {
  background-clip: text;
  background: -webkit-linear-gradient( red, blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
</p>

Answer 6

It can be quite challenging, but here's a solution that might work:

p {
  background-clip: text;
  background: -webkit-linear-gradient( red, blue, red);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

<p style="width:100px;">
row 0 -- hello
row 1 -- world
row 2 -- !!!
</p>

Implementing CSS to achieve striped row styling in a paragraph (not within a table)

Answer №1

Answer №2

Answer №3

Similar questions

Displaying the user's username upon logging into a website is a simple yet effective

The functionality of CSS isn't up to snuff on Mozilla Firefox

The information about the property is not appearing on the screen

Images in SCSS distorted due to styling issues

switching the content of an element using Javascript

php Use cURL and the DOM to extract content with specified CSS styling

My divs are multiplying twice as fast with every iteration of the Javascript For Loop

The adhesive navigation bar isn't adhering

Adaptive Table Layout that Creates a Page-breaking Design

The issue of drop shadows causing links to not work properly in Internet Explorer

Dynamic row addition in Material Design Lite table causes format to break

Attach a button and arrow to the cursor while it is hovering

Achieve full width with flexbox column wrap while minimizing the height

What is the reason for the disparity between CSS box-sizing content-box and border-box?

Exploring the World of Print CSS, Embracing Bootstrap, and Master

Make sure the header spans the full width of the body

Is there a way to eliminate unknown white gaps in the content?

What is the best way to incorporate CSS into JavaScript code?

Centering content within a <th> tag

Is there a way to exclusively utilize CSS in order to achieve bottom alignment for this btn-group?