Select every p element that comes after an h2 tag using CSS

Is there a way to select all paragraph elements that come after a specific heading?

<h2 class = 'history'>History</h2>
<p>this is paragraph 1</p>
<p>this is paragraph 2</p>
<p>this is paragraph 3</p>

<h2 class = 'present'>Present</h2>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>
<p>I don't want to target this paragraph</p>

Using the .history + p selector allows me to target paragraph 1. How can I target the subsequent paragraphs until I reach the 'Present' H2 tag?

htmlcsscss-selectors

Answer №1

If there are no additional p elements, you have the option to utilize ~ in place of +:

.history ~ p

If there are more p elements following your second h2, and you specifically want to target those positioned between h2.history and h2.present, it may not be achievable with current CSS selectors. The general sibling selector ~ selects each p sibling that appears after your h2, regardless of any other siblings among them.

However, it can be easily achieved using jQuery:

$('.history').nextUntil('.present')

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

Is there a way for me to retrieve the name of a newly opened browser tab from the original tab?

I have written a code snippet to create a new tab within the same browser by clicking on a link. function newTab() { var form1 = document.createElement("form"); form1.id = "newTab1" form1.method = "GET"; form1.action = "domainname"; //My ...

javascriptjqueryhtml

Ensure that the display is set to block to stack the input elements on top of each other

I am attempting to grasp the functionality of CSS display property and experimented with this basic HTML code: <div> <form className="container" action=""> <input name="fName" placeholder="First Name" type="text" value={props.fNam ...

htmlcss

Tips for modifying layout and concealment of content when using window.print()

Currently, on my web application, the vendor is able to print the invoice using windows.print(). However, in the print preview, it displays a screenshot of the current page. The vendor has specific printed paper with their own details and some blank space ...

jqueryhtmlcss

Ajax - Trouble with Updating DIV Content

As a beginner in AJAX, I am encountering difficulties creating a simple AJAX program. My goal is to have a button that, when clicked, changes the text of the div below it. Despite numerous attempts, I have not been able to identify the issue. Below is the ...

javascriptxmlajaxhtml

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

javascripthtmlcssnivo-slider

Confusing focus styling in React Bootstrap on mobile devices

THE ISSUE: Facing a problem in my project where on mobile, when a button is selected and then unselected, it remains dark due to focus which can be confusing. To see the issue in action, check out this screen recording: Screen recording You can view the ...

cssreactjsprogressive-web-appsreact-bootstrap

Finding the nearest span value upon clicking through a specific class

Whenever a user clicks on a hyperlink, my goal is to locate the nearest span element with a specific class and retrieve the text within that class. As of now, it is only returning blank text: Here is the provided HTML code snippet: <div class="plan re ...

javascriptjqueryhtmlonclickclosest

Creating a Website that Adapts to Different Browser Sizes: Tips and Tricks

I am currently working on a website that features a video background (mp4 file). However, I noticed that the video appears differently in Chrome, Explorer, and Firefox. In order to ensure compatibility across all browsers, I need to make some adjustments i ...

javascriptjqueryhtml

Font Awesome solely alters the font size within html, rather than css

<i class="fa fa-graduation-cap" aria-hidden="true" style="font-size: 50px;"></i> It's functioning properly. .fa-graduation-cap { margin-top: 38px; color: #E46A6B; font-size: 50px; } Not working too well. This issue is new to me. Any th ...

cssfont-awesome

downsides of scrolling text functionality

Sure, it may seem evil. But what makes it so? Is it because all browsers support it? Which aspx asp.net controls are restricted in this tag? What are the reasons for avoiding this tag? ...

htmlmarquee

The arrangement of Bootstrap columns does not appear to be in alignment with one another

While utilizing Bootstrap 4, I am encountering an issue with the Footer section. My intention is to create three columns of equal width using the col-md-6 class as outlined in the documentation. Here is the code snippet: <footer class="footer"> &l ...

htmlcssbootstrap-4

Unable to progress past first image in Bootstrap 5 carousel

I'm having trouble implementing a carousel on my HTML page. It only displays the first image, and the next and previous buttons are not functioning. I copied and pasted the code from Bootstrap directly. <link href="https://cdn.jsdelivr.net ...

htmlbootstrap-5

Identify all unticked checkboxes using jQuery

Looking for help with checkboxes: <input type="checkbox" name="answer" id="id_1' value="1" /> <input type="checkbox" name="answer" id="id_2' value="2" /> ... <in ...

jqueryhtmlinputcheckbox

Styling web pages with HTML and CSS directly from a MySQL

I'm facing a challenge in crafting a solution for a intricate issue. My project involves building a website that generates HTML templates containing both CSS and HTML files. Users will have the ability to create multiple templates/sites. In an effort ...

phpmysqlhtmlcssparsing

Modify button behavior on click after the initial press

Struggling to make this work the way I want. I have a button that should execute Javascript function A when clicked, and in function A, I need to change the onclick attribute to function B. This way, on the second tap of the button, it will trigger functio ...

javascripthtmlbutton

Show the chosen choice in a select dropdown with custom text using Angular

I successfully implemented this code snippet to display a dropdown list of countries and their phone codes. However, I encountered an issue where I need to only show the selected option's code without the country name. The first screenshot shows how i ...

javascripthtmlangulardrop-down-menu

Is it possible to create a CSS code that targets specific browsers for a particular style to be applied?

My project has external CSS that contains all the styles for my site. The site looks great in Firefox, but it becomes a mess in Internet Explorer (as usual). Is there a way to write CSS so that specific styles only apply to certain browsers? For example, ...

htmlcssstylesheet

Transforming a Microsoft Word document containing images into HTML code

Looking for a solution to extract images from a Word document, save them to a folder, re-link them back into the document and then convert it to HTML for uploading to our intranet site. Any suggestions on how this can be achieved? ...

htmlms-wordconverters

What impact does including a parent View Tag have on the styling in React Native?

Why does adding a View parent break my styles? Could React Native's View tag have default styles that I'm not aware of? Displayed below is the Button component along with screenshots demonstrating the difference when using and not using the View ...

ioscssreactjsreact-nativeview

Clicking the submit button on a PHP contact form will prompt the opening of

My project involves creating a custom contact form using html5 and php. I have successfully designed the form as per my requirements and now I am working on validating the entered values in the fields. To check if everything is functioning correctly, I am ...

phpwordpresshtmlformstemplates