Apply a different color to every other header using the nth-child selector

I'm attempting to create alternating color headers without defining multiple header styles. I've opted to use the nth-child selector for this purpose, but I'm having trouble achieving the desired colors.

JSFiddle: http://jsfiddle.net/CRh6L/

HTML: 

<h3 class="tips">Header 1</h3>
<p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>

    <h3 class="tips">Header 2</h3>
    <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>


    <h3 class="tips">Header 3</h3>
    <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p><br><br>


        <h3 class="tips">Header 4</h3>
        <p class="tips">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac purus neque. Nunc feugiat neque et eleifend lacinia. Proin a nunc imperdiet lacus placerat malesuada. Nam est libero, egestas sit amet leo nec, tempus placerat velit. Mauris pellentesque arcu eget pellentesque imperdiet. Mauris quis est lacinia, sodales nisl sit amet, dapibus ante. Ut quis arcu eleifend, ultrices tortor id, convallis arcu. Integer ut libero vitae dolor pretium porta. Phasellus sed bibendum lorem, in sodales tortor. Integer rutrum a orci non luctus.</p>

CSS:

p.tips {
    padding:10px 30px 20px 30px;
    font-size:14pt;
}

h3.tips {
    padding:0px 30px 0px 30px;
    font-family:OpenSans-Semibold, San-Serif;
    font-size:20pt;
    color:#E74C3C;
}

h3.tips:first-child h3.tips:nth-child(odd) {
    color:blue;
}
h3.tips:last-child {
    color:#C0392B;
}

What am I missing here? My goal is simply to achieve alternating colors for first and odd child elements.

htmlcsscss-selectors

Answer №1

Instead, try using:

h3.tips:nth-of-type(odd)

The original code 

h3.tips:first-child h3.tips:nth-child(odd)
is redundant as the first child is odd-numbered, and using a space instead of a comma between selectors changes the meaning entirely.

In this case, the use of :nth-child is not appropriate due to other elements between the headings. To target odd-numbered h3 elements regardless of surrounding elements, utilize the :nth-of-type selector.

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

Alignment of a Definition List with Omissions of Definitions

Often, I come across applications with forms containing optional fields. In the Show view, these fields tend to "collapse" together and lose alignment with their corresponding labels. For instance, if I have 3 fields that should be displayed as: Phone: 3 ...

htmlcssruby-on-rails

In JavaScript, you can verify if a specific <input> element is an input-field

With the introduction of HTML5, a variety of new input types have been added: <input /> Is there a way to detect whether an input field is a text field (such as date, time, email, text, etc.) without explicitly specifying each type? I would like t ...

javascripthtml

The total sum of various divs containing a mix of numbers and letters

I have a group of div elements with the same class, each containing a value in the format (X1), (X2),... I need to add up these numeric values only, like 1 + 2 + .... Since these divs are generated dynamically, I won't know how many there will be. How ...

jqueryhtmlsumalphanumeric

Could anyone provide assistance with creating responsive CSS styles for a website?

I am currently utilizing Drupal for my website. In my kickstart sub theme, which is a subtheme of omega, I have added a sitename and slogan. Additionally, I inserted a telephone number through the branding.tpl.php file. However, when I resize the window, t ...

cssdrupalresponsive-designthemesstylesheet

The dynamic addition of divs to the HTML body is causing them to overlap

Check out this functional plunker that is nearly complete. The current issue I am facing is with the chat divs being dynamically added to the body using $compile, but they all have the same CSS class and end up overlapping each other, like so: .chat-wind ...

cssangularjs

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

At times, the animation in SetInterval may experience interruptions

I have created an animation using a sequence of images. The animation runs smoothly with the setinterval function, but for some reason, it occasionally pauses. I've shared a fiddle where you can see this pause happening. Click Here to See the Unwante ...

javascriptjquerycsshtmlsetinterval

What is the best way to showcase my React App.js in an HTML document?

Is there a way to display my React app file (App.Js) within my Index.html file? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/fav ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

Troubleshooting a jQuery Selector Issue with a Dynamic Form

I developed a jQuery function to search for all the necessary inputs in a specific section of a website. function check_property_vars() { jQuery(this).parents('.property_group').find('div[id^="property_group_"]:input[required]:visible&a ...

javascriptjqueryhtmlcss

Can you provide me with instructions on utilizing PNGs to create edge masks for an image?

After experimenting with border-image and PNGs to achieve textured borders, I'm curious if there is a method for masking in a similar fashion? I recently came across the Rumchata website which showcases what I have in mind. Their background has a blu ...

htmlcssimagepngmasking

Header on top of table that stays in place with scrolling

I'm facing an issue with a table that contains user-generated data. We are utilizing a plugin known as Clusterize, which allows us to smoothly scroll through large amounts of rows. However, the specific markup required for this plugin seems to be caus ...

javascriptjquerycssclusterize

What is preventing my JQuery .animate() function from functioning properly?

<head> <script type="text/javascript" src="lib/jquery-1.9.0.min.js"></script> <script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.4"></script> <link rel="stylesheet" type="text/css" href="source/jque ...

jqueryhtmlanimation

Hiding a parent DIV in JS based on specific content: Here's how

I need help figuring out how to hide multiple parent DIVs based on the content of a specific child DIV. Here's an example: <div class="report-per-day"> <div class="report-day">26 May 2022</div> <div class=" ...

javascripthtml

Tips for generating a numeric whole number input field with Vuetify

After researching the topic on Vuetify's specific number input component, I am attempting to create a numeric input field. The value for both input and output is currently unknown, meaning it could be either undefined or null in order to allow cleari ...

javascripthtmlvue.jsvuetify.js

What is the best way to add a gradient background image to a container that also has margins?

I am currently working on a push menu that shifts the main content container by adding margin-left to it. I am aiming to achieve a background image effect similar to what is seen on . Here is the progress I have made so far in my codepen: https://codepen ...

htmlcss

What is the best way to implement a CSS Style specifically for a glyphicon icon when it is in keyboard focus?

I have a particular icon representing a checkbox that appears as a glyphicon-star. It is designed to display in yellow when focused on by the keyboard navigation. This feature is intended to help users easily identify their location on a page. However, an ...

javascripthtmlcss

Is it possible to change the background color of a MUI theme in ReactJS by using Css

Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the inde ...

javascriptcssreactjsmaterial-ui

Fade in and out of div elements upon clicking on an # anchor

I have been attempting to create a function where different divs fade in and out when clicking on an image with an <a href>. Unfortunately, I have not been successful in getting it to work despite several attempts. Here is the code that I am using: ...

javascriptjqueryhtmlcss

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

htmlcss

Conflicting configurations in VS Code causing issues

Currently making adjustments to my JSON settings and everything is functioning correctly, however, I keep encountering this persistent error: "Expected comma jsonc(514)" Here's a snippet of my code that's causing the issue: "css.li ...

cssjsonvisual-studio-codesettings