Choose the initial three sibling paragraphs following a separate heading two element

Is there a way to target only the <p> tags that come after the first 3 <h2> tags in CSS?

I want to style the "one", "two", and "three" text as red, but not affect the "four" and "five" text.

Below is an example of my code, but I'm unsure what the correct CSS selector should be:

.container h2 + p {
  color: red
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

htmlcsscss-selectors

Answer №1

When trying to target all p elements that come after the first three h2 elements, you'll encounter a challenge of using complex selectors for each p element meeting that condition. Unfortunately, CSS selectors do not offer a pseudo-class for selecting n elements following another element, nor do they allow matching elements between two specific elements (such as being able to select elements between h2:nth-of-type(3) and h2:nth-of-type(4)).

.container h2:nth-of-type(-n+3) + p,
.container h2:nth-of-type(-n+3) + p + p,
.container h2:nth-of-type(-n+3) + p + p + p {
  color: red
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

If you are open to overriding styles, there is a much simpler way — override the style with a different selector:

.container h2 ~ p {
  color: red
}

.container h2:nth-of-type(4) ~ p {
  color: currentColor
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

Answer №2

utilize :nth-of-type()

code snippet

.container h2:nth-of-type(-n+3) + p {
  color: red
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

To target ALL rather than just the adjacent p to h2, you will need more complex selectors:

Code Snippet

.container h2:nth-of-type(-n+3) + p,
.container h2:nth-of-type(-n+3) + p + p,
.container h2:nth-of-type(-n+3) + p + p + p {
  color: red
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
</div>

Answer №3

UPDATED based on question clarification:

According to BoltClock, there is no specific selector for that. However, you can approach it differently by targeting all <p> elements after the fourth occurrence of <h2> and change their color to something other than red:

.container p {
  color: red;
}
.container h2:nth-of-type(4) ~ p {
  color: inherit;
}
<div class="container">
  <h2>Some text</h2>
  <p>One</p>
  <h2>Some text</h2>
  <p>Two</p>
  <p>Two</p>
  <h2>Some text</h2>
  <p>Three</p>
  <p>Three</p>
  <p>Three</p>
  <h2>Some text</h2>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <p>Four</p>
  <h2>Some text</h2>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</p>
  <p>Five</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

Collaborate on sharing CSS and TypeScript code between multiple projects to

I am looking for a solution to efficiently share CSS and TS code across multiple Angular projects. Simply copy-pasting the code is not an ideal option. Is there a better way to achieve this? ...

cssangulartypescriptshare

"Implementing a toggle switch on your Odoo website the right way: a step-by

I am looking to implement a toggle switch in the header of my Odoo template. I came across this Bootstrap code snippet: <div class="custom-control custom-switch"> <input type="checkbox" class="custom-control-input" ...

htmlcsswebbootstrap-4odoo

Issue with menu display on Internet Explorer

Having some trouble with IE. My menu displays fine in Firefox and Chrome, but IE is causing issues... It seems that IE isn't rendering the <li> tag properly, so my dropdown menu isn't functioning in IE. Can anyone assist me? Here's t ...

phphtmlcss

Styling checkboxes using jQuery and replacing them with images

I'm looking for help with a script that will hide my checkboxes and replace them with styled checkbox images. The script I have hides the checkboxes and displays the default image, but it doesn't update the checkbox state or image when clicked. I ...

jqueryhtmlcss

Removing an unnecessary DIV element from an HTML Document

I have been working on a News application and am utilizing a web product to fetch News Headlines. When I request a NewsHeadline, the product sends back an HTML Code containing the News Headline. <div class="mydiv"> <script type="text/javascript ...

javascripthtml

Problems arising from Jquery append functionality

When using the append method, my inner div is only attaching one WHEAT-COLORED-BOX, whereas when using appendTo, my inner div attaches all the required number of WHEAT-COLORED-BOXES. Therefore, in this case, appendTo gives the correct result while append f ...

javascripthtmljquerycssnode.js

What is the solution for getting `overflow-x` to function in place of `overflow-y`?

I have a main container with several sub-containers inside. When the main container's width exceeds its limit, I want to display a horizontal scroll bar. Instead of using the 'display: inline-block' property because it creates unwanted whit ...

htmlcss

What is the best way to keep the rotateblock within the designated section boundaries?

Issue: The blue block is getting out of the section due to the transform property set as rotate. How can this be resolved? https://i.sstatic.net/F0exR.png section { padding: 10px 0 40px; background: #ececec; height: 1600px; } .filter { display ...

javascripthtmlcss

Is there a way to bypass media queries in a CSS file?

I'm working on a web project that includes a CSS file with media queries. However, for one specific page, I do not want to apply the media queries from this CSS file. How can I exclude them just for that particular page? ...

cssmedia-queries

Formatting of XML in IE10 is not retained when displayed within an iframe

I'm in the process of creating a basic HTML file and looking to include an XML file within it. My method for doing this involves using iFrames. Surprisingly, when I view the XML file in IE9, it appears formatted (despite some activeX warnings). Howeve ...

htmlxmliframeinternet-explorer-10

Using CSS to place my logo within the navigation bar

Currently, I am struggling to find tutorials that can assist me in aligning the responsive navigation bar with the logo. As a newcomer to HTML & CSS and website creation, I would greatly appreciate any guidance on positioning it correctly. Additionally, co ...

htmlcssnavigationbar

What is the process of uploading a video and showcasing it on an HTML page?

I have successfully uploaded images and displayed them on an HTML page. Now, I am looking to do the same for videos. Here is my current code: $('#addPhotosBtn').click(function() { $(this).parents().find('#addPhotosInput').click(); }) ...

javascripthtmljquerycss

Tips on executing a $.get request while submitting a form?

Instead of using AJAX to submit my form, I am trying to implement a progress bar by making GET requests to the server while the form is submitting. This is particularly important when dealing with multiple file uploads that may cause the submission to take ...

javascriptajaxhtmlformsupload

Struggling with the display property d-none in Bootstrap

I'm currently attempting to show a segment of my code exclusively on medium-sized screens and larger, while displaying another portion of the code solely on small and extra-small screens through the utilization of Bootstrap. I made use of Bootstrap&ap ...

htmlbootstrap-4

Merge audio and video streams together using MediaRecorder to create a single bundled file

I am currently working on a small interactive animation/game using canvas and PixiJS. One of the features I would like to include is the ability for users to save the animation they create. Through my research, I have found that MediaRecorder seems to be t ...

javascripthtmlhtml5-canvasweb-mediarecorder

A guide on connecting static files in Django when the HTML context includes the file path

Here's the content of my views.py file: from django.shortcuts import render def page(request): css = 'temp/css.css' return render(request, 'temp/index.html', {'css': css}) and this is the content of templates/t ...

htmlcssdjangostatic

Using Javascript to dynamically change the background image url in CSS

I've been tinkering with this for a while now. I believed this code would do the trick as I'm fetching the value from the input and setting the background-image URL to that value. Appreciate any help! The following code is within the head tag. ...

javascripthtml

What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS. For example, in my parent component: HTML <div class="chips"> <p class="tags">Tag 1</p&g ...

htmlcssangularangular-components

The dropdown menu appears when the user clicks on an empty area

How can I ensure that the drop-down menu is only activated when the arrow or the name is clicked? I've tried looking at similar questions but haven't found a solution. Currently, clicking anywhere next to "shop" activates the drop-down. Here&apo ...

htmlbootstrap-4

Achieving a seamless blend of parent background with child background: A step-by

I am trying to make the parent background color overlap the child background color in two divs. Currently, the child's background is overlapping the parent's background. Please refer to the JS-Fiddle link below for more information: <div id=" ...

css