designing items in various color palettes

section {
background-color:#d5ecf2;
width:1024px;
height:200px;
margin: 0 auto;
}
.sectiontext {
float:right;
height:180px;
width:720px;
margin:10px;
}
<section>
        <div class="sectiontext">
<h3>GDS 114.01: HTML and Javascript</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<hr>
<section>
<div class="sectiontext">
<h3>GDS 115.01: Digital Graphics for Gaming</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
<hr>
<section>
<div class="sectiontext">
<h3>Personal Work</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

There are 4 sections on one of my web pages, all with the same background color (#d5ecf2). I am considering alternating this color with another hex color (#7c96a5) as new sections are added. One way to achieve this is by creating separate div IDs or classes with different background colors and manually placing them in the HTML code. Is there a way to automatically set the next section's background color opposite to the previous one?

htmlcssarticle

Answer №1

To style elements that appear on the same page together, you can utilize the nth-child CSS selector:

article:nth-child(odd) {
  background: #7c96a5;
}

Alternatively, if there are other elements within the container div, consider using the nth-of-type selector:

article:nth-of-type(odd) {
  background: #7c96a5;
}

Answer №2

Nice try @Chris, however, the correct selector to use is 2n:

article:nth-of-type(2n) {
  background: #7c96a5;
}

If you want to see it in action, check out this JSFiddle link

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

ASP.Net & Ajax Fusion Login Interface

I am encountering an issue while creating a login page with HTML, AJAX, and ASP.NET. The data is being passed to the AJAX function successfully, but when I debug the ASP page, the username and password are showing up as NULL. The purpose of the code is to ...

javascriptasp.nethtmlajaxauthentication

Open the HTML document and access the file contents

I'm having trouble reading a text file from my computer onto a website. It works fine in Internet Explorer, but won't work in Chrome. I don't have much experience with HTML, so any help would be much appreciated! <html> <body> ...

javascripthtmlajaxgoogle-chrome

Has window.document.height become obsolete in the latest version of Chrome, version 17?

After recently upgrading to the most recent version of Chrome (17.0.963.56), I've noticed that the property window.document.height is no longer valid. Has anyone else experienced this issue? I haven't been able to find any information about why i ...

htmlgoogle-chrome

What is the best way to make my background image adapt to different screen sizes

I am currently working on updating my webpage and facing a few challenges that I would appreciate some assistance with: One issue is that the images on my page do not adjust to the size of the browser window. As a result, when I resize the window, the i ...

csshtmlresponsive

Clicking on the image does not result in a larger image being displayed

Currently working on an assignment that requires a modal pop-out to display larger versions of photos when clicked, with the option to go back using the X button. Unfortunately, I'm facing issues with the X button not functioning properly and images n ...

javascriptjqueryhtmlcssmodal-dialog

Sending Django Variable With Javascript

As a newcomer to Javascript, I am grappling with retrieving the value of a variable from my HTML form. My current code seems to be somewhat functional - I added an alert to test the logic and found that the else statement is working fine. However, I'm ...

javascriptjqueryhtmldjangopython-3.x

Stylish mobile navigation styles with CSS

Hey there, I appreciate any help you can provide. I'm having trouble figuring out the right CSS code to modify the colors of my Mobile Menu only... I'd like to change the placeholder text as well as the text and background of the drop-down menu ...

cssmenu

Ways to show dynamic text according to slider adjustments

I am struggling with adding an if condition to my form that includes a horizontal slider. My goal is to display text based on the position of the slider. Can someone offer some guidance on this, please? Here's my HTML code snippet: <form method=" ...

javascriptjqueryhtml

Utilizing personalized CSS for specific ioslides

If I decide to stick with the default data and presentation of a new ioslides, changing only the second slide (## R Markdown) without affecting the entire item, how can I do this by setting up the css document accordingly? My goal is to simply adjust the f ...

cssrioslides

Learn how to incorporate a consistent header and footer across multiple pages on a website with Node.js, ExpressJS, and either hbs or ejs templates

Creating a common header (navbar) and footer page to be included in multiple/several pages of a website. I want to create a dynamic website using Node.js and Express.js. The code for the navbar and footer will be placed in a common file named header.html ...

javascripthtmlnode.jsexpress

The hover effect does not function on an SVG element when it is placed within an external file

I've been experimenting with SVG animation. My goal is to change the color of a circle when it's hovered over. <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 437 ...

csssvgsvg-animate

Tips for customizing the CSS file of a React component imported from a UI framework

As I embark on building a large application utilizing React, I find myself navigating the new territory of React philosophy coming from a background of Css+Js+jQuery methods. One key requirement for my project is a reliable UI framework that aligns with Go ...

javascriptcssreactjsmaterial-design

Aptana HTML Editor displays a blank page

Currently, I have Aptana set up as a plugin within Eclipse Neon. To create my HTML file, I used the template found at "New From Template => HTML => HTML 4.0.1 Strict Template (*.html)". The issue I am facing is that when I click on the file in the Project ...

htmleditoraptana

The font fails to load

I've hit a roadblock with this issue. I'm attempting to add a custom font to my project. The CSS file can be found in the directory project/css/. The font is located at project/fonts/iconfont/. In that folder, I have the following font files (alt ...

htmlcssfonts

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui

Issues with the functionality of customisable list items in a list

I am attempting to customize the appearance of specific list items within a ul element. One li element should be displayed in red font, while another li element should have a hyperlink styled with a different color and an underline rollover effect. The thi ...

htmlcss

What is the best way to save a jQuery or JavaScript variable into a JSON file?

Is there a way to save a jquery variable in a json file? I have the following: var image='/test/test.png'; I am obtaining this path through file upload: <input type="file" name="imageurl" value="imagefile"></input> Therefore, I ne ...

javascriptjqueryhtmljson

I have exhausted all possible solutions in my attempts to eliminate the whitespace below my footer. Is there something I have overlooked or not tried yet?

After updating the CSS stylesheet, I noticed a white space below my footer. A screenshot has been included for reference. Despite including a CSS reset, the issue still persists. /* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author ...

htmlcss

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

htmlcssflexbox

How come the styles in my CSS file aren't being applied to my images based on their class or ID?

When I apply a className or id to my img tag in my JavaScript (using React.js) and then add a style that references that id or class, the style does not get applied. However, when I do the same for a div, everything works perfectly fine. <--JavaScript- ...

javascripthtmlcssreactjs