Creating alternating colored divs can be achieved by applying a styling rule to select every

Struggling with a piece of code where I want to alternate the background color to #F8F8F8 in .itemrow.

Check out the code here: http://pastebin.com/mgHYzJAd

.itemrow {
    padding-top:20px;
    padding-bottom:20px;
    background-color:#f8f8f8;
}

Also, feel free to visit the project page for more context:

I've done some digging and found suggestions like nth-child(odd), but it's new territory for me as I'm fairly new to front end development.

Any assistance would be greatly appreciated! Thank you in advance. - Paolo

htmltwitter-bootstrapcss

Answer №1

How about this idea:

.itemrow:nth-child(even) {
    background-color:#f8f8f8;
}

You could also consider using odd instead of even. It's surprising that you haven't come across this before. This feature has been around for quite some time, with support dating back to at least IE9, and possibly even IE7. However, its usage is not very frequent. Alternating backgrounds seem to be the primary use case for it.

Answer №2

To add more versatility, consider using a multiplier:

.elementrow:nth-child(2n) {
    background-color:#f8f8f8;
}

This will enable you to achieve the following effect:

.elementrow:nth-child(2n + 1) {
    background-color:#f8f8f8;
}

See it in action: http://jsfiddle.net/k37m1yak/ Browser Compatibility: http://caniuse.com/#search=nth-child

Answer №3

nth-child(odd) is my go-to method for this situation. I suggest giving it a shot with the following code:

.itemrow:nth-child(odd) {
  /* add your custom styles here */
}

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

Guide on finding the index of the clicked element based on its class

Is there a way to get the index of the clicked element within its list as well as in its .blue class? I have successfully obtained the index within its list, but I am struggling to figure out how to get the index within its .blue class. For instance, when ...

javascripthtmljquerycss

Shifting hues of dots within a grid according to the passing of time

As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...

javascripthtmlcssarraysmultidimensional-array

Limit the y-axis on CanvasJS visualization

Is it possible to adjust the minimum and maximum values on the y-axis of the graph below: new CanvasJS.Chart(this.chartDivId, { zoomEnabled: true, //Interactive viewing: false for better performance animatio ...

javascripthtmlcss

What is the best way to extract basic information from a JSON object?

What is the best way to retrieve the weight value from this specific object? var prescription = "{'type':'" + $('#medi-type option:selected').val() +"',"+ "'weight':" + $('#weight').val() +","+ ...

javascriptjqueryhtmljson

Displaying a loading animation within a specific div element

Is it possible to use jQuery to insert a div into another div? My goal is to replace the contents of one div with a loading div while waiting for an ajax call to return. <div id="content1">foo</div> <div id="content2">bar</div> < ...

javascriptjqueryhtmlcssajax

What's the reason behind CSS transitions starting with a black background?

When I apply a transition to the heart, it inexplicably turns black at the start of the animation before displaying the intended gradient effect. Below is the code snippet: .heart { font-size: 2.5rem; padding-right: 2rem; } .heart:hover ...

htmlcss

The HTML table is not displaying properly due to colspan being used incorrectly

A table has been created with all headers having colspan=2 and some body cells having colspan=N. In certain instances, the display is not rendering correctly: https://i.sstatic.net/xARV6.png td, th { border: solid #aaa 1px } <table> <thea ...

htmlcss

What benefits does importing bootstrap.scss into styles.scss provide compared to adding it directly to the styles block in .angular.cli.json?

What are the advantages of importing bootstrap.scss into the styles.scss file compared to adding it to the .angular-cli.json styles block? Which approach is better and why? styles.scss @import '~bootstrap/scss/bootstrap.scss'; vs .angular-cl ...

cssangularwebpacksassangular-cli

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

css

Issue with Bootstrap 4 custom list-group collapse arrow not working as expected

I recently customized a Bootstrap 4 list-group to include collapse functionality. In my customization, I added a CSS caret arrow with the following behavior: 1. Initially pointing down 2. Clicked once, it points up 3. Clicked again, it returns to the init ...

htmlcssbootstrap-4

Change the z-index of divs when clicked

When a button is clicked, I want to iterate through a group of absolutely positioned children divs with varying z-indexes. The goal is for the z-index of the currently visible div to decrease on each click, creating a looping effect where only one div is v ...

javascriptjquerycss

Transforming a horizontal list into a vertical one

What might be causing the message list to display horizontally in the admin dashboard, but vertically on other pages? .user-list{ display:inline; } .users header, .users-list a{ display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px s ...

htmlcss

Adding a class to a different UL tab from the tab div in jQuery tabs - a guide

Looking to implement a tabs navigation using jQuery without the jQuery Tabs UI. Essentially, when a user clicks on a list item, the script selects the list element with data-tab="X" and adds the class current, making the link visible (default op ...

javascripthtmljquerycsstabs

html interactive/expandable tree

I've come across this code which generates an HTML tree, but I'm facing an issue where the tree expands every time I refresh the page. What I want to achieve is to have certain branches expanded and others collapsed when the page is opened, depe ...

javascriptjqueryhtmlcss

Acquire the current audio video stream directly from the web browser

Currently, I am utilizing a JavaScript library that internally invokes getUserMedia. My objective is to access the stream object that has already been initiated. Unfortunately, the library does not provide any means to retrieve it. Is there a method avai ...

javascripthtmlhtml5-videowebrtc

Is it possible to monitor the progress of an order placed via my website as a Flipkart affiliate?

As an affiliate for flipkart, I promote their products on my website. I am interested in being able to track the orders and purchases made by users who are redirected to flipkart from my site. Is it possible for us to obtain the order/purchase id for thos ...

javascripthtmlaffiliateflipkart-apiaffiliates

Generate a Selectpicker dynamically when a button is clicked

Wanting to insert a new row in an HTML table dynamically by clicking on an add button. The new row includes a select element with the selectpicker class. Interestingly, when I remove the selectpicker class in my script to append a new row, the select eleme ...

javascriptjqueryhtmlbootstrap-selectpicker

The most efficient method for interacting with externally generated HTML in Rails

For my Rails page help documentation, I utilized the HelpNDoc help authoring tool to generate a folder containing HTML pages and additional folders for JavaScript, images, stylesheets, and libraries. Now I am seeking the most efficient way to integrate thi ...

htmlcssruby-on-rails-4helpndoc

Guide on triggering an open modal when clicking a link using jQuery

Creating a modal popup has always been my goal. After designing the CSS to style it, I found myself stuck as I lack knowledge in JQuery or JavaScript to code the functionality that animates and opens the modal upon clicking a button or link. Despite search ...

javascriptjqueryhtmlcssmodal-dialog

Assign a value to the active textbox using JavaScript

Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...

javascripthtmltextinput