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

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

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 №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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that the image's aspect ratio is preserved while adjusting the height of the window on both Safari and Chrome browsers

Trying to style some cards on my website using HTML and CSS, I noticed that the aspect ratio of the cards gets distorted when resizing the window. This issue only seems to happen in Safari, as Chrome handles it fine. I'm not sure which specific comma ...

reactjscssgoogle-chromesafari

Refresh the data in a table upon clicking the menu

I am looking to develop an accordion MENU, but unsure if I should use divs or <ul>. When a submenu is clicked, I want to execute a mysql query to update the data in the table next to the menu. I'm not sure of the best approach and whether to uti ...

phphtmlcssajax

When seen on a mobile device, the background image is set to repeat along the

Having trouble getting my background image to repeat on the y-axis when viewed on a mobile device. On desktop, the page doesn't scroll and the background image fills the screen perfectly. However, when switching to tablet or mobile, scrolling is neces ...

htmlcssresponsive-design

What is the best way to ensure the second navbar stays at the top when scrolling, after the first one?

Looking for a solution to create a navbar with two distinct sections for contact info and the menu. The goal is to have the contact info disappear when scrolling down, while the menu remains fixed at the top of the page. When scrolling back up, the menu sh ...

htmlcss

Count of elements in one flexbox row

Having a flexbox container with multiple items in row-wrap format, is there a way to use JavaScript to determine the number of items in each row? Essentially, finding out at what point they wrap. For instance- <div class="container"> <div clas ...

javascriptcssflexbox

Guide on triggering CSS @keyframes animations upon element visibility while scrolling

I'm struggling with controlling CSS animations that I want to start only when the element becomes visible on the screen. The issue arises because I have a website with a total height of around 8000px and the element with the animation is located far d ...

javascriptjqueryhtmlcss

My React application is not showing the CSS styles as intended

In my project, I have a component file named xyx.js where I properly imported my scss file './xyz.scss'. Both of these files are in the same folder. Interestingly, when I view the styles using the Chrome scss extension, everything seems to be wor ...

htmlcssreactjssass

Disable the outer div scrolling in VueJS, but re-enable it once the inner div has reached the bottom of

I am currently working on a webpage that contains multiple divs stacked vertically. Here is the concept I am working with: Once the scrollbar reaches the bottom of the first div, the outer scrollbar will be disabled and the inner scrollbar will be enabled ...

javascripthtmlcssvue.js

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma

Creating a sleek animated analog clock using CSS and jQuery

I am facing a small issue with my CSS3/jQuery analog clock. Currently, the movement of the clock hands is a bit abrupt. I would like the animation to be smooth. I attempted using transition: all .1s, but it gets messy when the clock hands reach the top po ...

javascriptjquerycss

Tips for incorporating background color with CSS pseudo-elements

I'm attempting to replicate the outcome shown in the screenshot but I'm having difficulty achieving it without adding any new DOM elements. When I click on the demo link and choose a date range, the start date and end date selections are not dis ...

cssreactjs

How to Position an Input Text Beside an Icon Image Using JqueryMobile

Just starting out with jquery mobile and css! Check out my jsfiddle.net/mapsv3/kWJRw/1/, when I use an icon on the left side, the input text gets cut off and I can't see the end of it. ...

htmlcssjquery-mobile

stacking order of floated and positioned elements

After researching on MDN and reading through this insightful blog post, it is suggested that in the absence of a z-index, positioned elements are supposed to stack above float elements when they overlap. However, upon closer examination, the example prov ...

htmlcss

The footer is not being properly pushed down by the DIV

I created a page and utilized toggle with jQuery. The layout of my page is great, but when clicking on the button to reveal content, the div remains fixed and my content expands and hides behind the footer. Take a look at the image here: https://i.stack.i ...

jqueryhtmlcss

Create animations for SVG paths and polygons that move along specified paths

I am trying to animate both a path and a polygon in an SVG arrow along the same path. Currently, I have successfully animated the path using CSS, but I am struggling to figure out how to move the polygon along the path at the same pace. <svg id="La ...

cssanimationsvg

I am having trouble getting my textarea to accept width attributes

Strangely, the text area on my website just won't cooperate with the width I specify. I've double-checked the CSS multiple times to no avail! Take a look at this jsfiddle example that demonstrates what I'm trying to achieve. However, on my ...

htmlcsstextarea

Bootstrap 4 experiences issues with modal dialogs

I am experiencing an issue with my code not working on Bootstrap 4. When I click on the 'overview' button, the page darkens but the dialog does not appear. This functionality worked fine with the old version of Bootstrap. Can someone please assis ...

javascriptcssrubybootstrap-modalhaml

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

cssangularjsangularjs-directive

Looking to add elements to a specific div dynamically using jQuery? Let's explore how to insert comments seamlessly

I would like to implement a comment system that adds entered comments to a specific div. Here's the code I have so far: <ul class="comments"> <li> <a class="commenter_name" href="/">Dushyanth Lion</a> ...

javascriptjqueryhtmlcss

Issue with Font Awesome 5 icons not displaying properly after integrating Bootstrap

Trying to spruce up my buttons by adding some fontawesome icons from bootstrap. The icons I'm using are: fas fa-user fas fa-users They display fine without any styling. However, when I apply the bootstrap button css, the "fa-users" icon appears as ...

htmlcsstwitter-bootstrapfont-awesomefont-awesome-5