Which specific parameter should be utilized for the nth child selector?

Is there a way to target and customize elements 2, 5, and 8 using nth-child selector?

<div class="col">
    1 <h3>aa</h3>
    2 <p>bb</p>
    3 <p>cc</p>

    4 <h3>aa</h3>
    5 <p>bb</p>
    6 <p>cc</p>

    7  <h3>aa</h3>
    8 <p>bb</p>
    9 <p>cc</p>
</div>

Answer №1

Utilize nth-child formulas for styling elements.

The specific formula you need is:

.col p:nth-child(3n+2){}

Answer №2

.col  p:nth-child(3n+2) {
      color: red
    }
<div class="col">
      <h3>aa</h3>
      <p>bb</p>
      <p>cc</p>
      <h3>aa</h3>
      <p>bb</p>
      <p>cc</p>
      <h3>aa</h3>
      <p>bb</p>
      <p>cc</p>
    </div>

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

The links located beneath the iframe/span element are unclickable

My latest creation is a static advert ticker positioned at the bottom of the window. It's contained within an <iframe> for easy placement on other websites. I added a <span> around the <iframe> to keep it fixed at the bottom of the s ...

What is the reason for the Client Height value not affecting other elements?

I'm trying to set the spacing of my sidebar from the top equal to the height of the header. However, when I use clientHeight in JavaScript to get the height and then try to apply it to other elements using marginTop or top values (with position includ ...

Loading times for the Polymer Project are sluggish

The website design is very appealing. However, it seems to be loading quite slowly even on Google's servers. Is there a way to speed up the initial load time of the Polymer site? Additionally, there are numerous HTTP requests being made; is there a wa ...

A multimedia player featuring various video source files and multiple text track options

My issue involves a video element where the user can choose from a list of options to play. Each video has an associated text track, but I am having trouble setting the new text track when a different video is selected. In my html, I have: <video id ...

Iterating through records with a set of three columns in every row

I need to divide each row into 3 columns image : https://i.sstatic.net/4phtb.jpg <div id="list-product"> <div class="row"> @foreach($products as $product) <div class="col-lg-4 ...

Efficiently update a multi-step form using Ajax and jQuery by adding new content without needing to reload the

Is it possible to create a multistep form on a single page without reloading the div with content from a PHP file, but instead appending it below? Here is my current progress: $(document).on('submit', '#reg-form', function(){ var ln = ...

Conflicting behavior between jQuery focus and blur functions and retrieving the 'variable' parameter via the $_GET method

There is a simple focus/blur functionality here. The default value shown in the 'Name of Venue' input field changes when the user clicks on it (focus) and then clicks away(blur). If there is no text entered, the default value reappears. Input fi ...

Having trouble with CSS text-align right not functioning properly? Here's how you can fix it

<div style="text-align: left;width: 21cm;"> <h4 style="text-align: center;font-weight: bold;font-size: 20px;margin: 0">Tax Invoice(Center) <span style="text-align: right;"> For Customer(Right)</span></h4> </div> I n ...

Issue: Troubile in fetching CSS file from CDN and using local copy as fallback, What is the solution?

I previously inquired about this issue, however, I did not receive a satisfactory solution. Therefore, here I am asking again for your assistance. I am attempting to retrieve my CSS from an external CDN service, such as http://cdn.example.com/. This scrip ...

At the ready stance for a particular grade of students attending a class

I have created a page with a navigation menu that can be scrolled using the wheel mouse. My goal is to ensure that the li item with the 'selected' class is always positioned in the first position on the left. Is there a way to achieve this using ...

EventListener fails to detect any changes in the dropdown menu

I am currently delving into the world of Django and JavaScript, but I am encountering an issue with the addEventListener function. It seems to be malfunctioning and I am at a loss. Can anyone provide insight into what may be causing this problem? Here is ...

Guide on implementing iterative data path in v-for loop using Vue

I'm just starting out with Vue and I want to use image file names like "room1.jpg", "room2.jpg", "room3.jpg" in a loop Below is my code, where the second line seems to be causing an issue <div v-for="(p,i) in products" :key="i"> <img src ...

Is it possible to use CSS border-radius without any vendor prefixes?

Are there alternative methods to create rounded borders without using the -moz prefix, since this only applies to Mozilla browsers? -moz-border-radius-topleft:3%; -moz-border-radius-topright:3%; -moz-border-radius-bottomright:3%; -moz-border-radius-bott ...

Setting a background image for a button in Internet Explorer 6 HTML

Here is the code I am using to add a background image to a button on my website. It works on IE9, Firefox, and Chrome: <td> <input id="btn1" style="width: 25px; height: 25px; background-image: url('images/refresh.png'); background-re ...

Background not covering full height despite setting HTML and body heights to 100%

I've been struggling to set my wrapper to 100% height, despite setting the height to 100%. Any solutions? At the moment, my main_wrapper is empty and should have a background color of red. While I'm looking to add a footer using position: fixed ...

Troubleshooting the issue of browser prefix injections not functioning properly in Vue when using the

I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inje ...

Send a variable to a specific page and locate it within a dropdown menu

I am currently working on an HTML page that displays employee leave details. The page includes a pending leave option with the ability to edit. Users should be able to edit their leave while it is still marked as PENDING. Once the edit button is clicked, t ...

Conceal the page until it has completely finished loading

Similar Question: How can I delay displaying a webpage until it is fully loaded? I have a basic website and I want to delay its opening for X milliseconds to ensure that everything, such as images, is fully loaded. Is there a way to do this for the en ...

Is it possible to customize the appearance of the Facebook and Twitter sharing buttons?

Whenever I try to use the Twitter and Facebook share functionality, I am presented with the standard default share buttons that resemble: https://i.sstatic.net/W5ZN8.png https://i.sstatic.net/0MW3U.png I have reviewed the policies, which indicate: Do not ...

Methods for smoothly animating an image to move up and down using CSS

I'm new to CSS and I was wondering if it's possible to create a smooth vertical movement effect for an image using CSS. Something like shown in this link: .... ...