My HTML structure consists of repeating pairs of img and p tags. Often, the img tag is missing from the sequence.
<img>
<p></p>
<img>
<p></p>
<img>
<p></p>
<p></p>
<p></p>
<img>
<p></p>
I want to target all p tags that do not immediately follow an img tag.
Currently, I know how to select p tags that are preceded by img:
img + p {}
How can I achieve the opposite? How can I select p tags that do not come after img in the HTML structure?
To tackle the absence of a "previous sibling" selector, one approach is to style your regular p elements and then override the styles for those that come after an img.
A more efficient method would be to enclose this in a container so that you're only targeting specific p elements instead of all of them throughout the page.
.container > p {
color: red;
}
.container > img + p {
color: black;
}
/* DEMO PURPOSES */
img { display: none; } img, p { margin: 0; }<div class="container">
<img />
<p>This is preceded by img</p>
<img />
<p>This is preceded by img</p>
<img />
<p>This is preceded by img</p>
<p>This is not preceded by img</p>
<p>This is not preceded by img</p>
<img />
<p>This is preceded by img</p>
</div>Up to this moment when I am composing this response, the CSS language does not offer a selector for targeting the previous element.
In your situation, as a temporary solution, let's assume that these p and img elements are enclosed within a container with the class div.wrapper, you can experiment with the following code:
.wrapper > img + p ~ p {
color: red;
}
.wrapper > img + p {
color: black !important;
} <div class="wrapper">
<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
<p>unaffected</p>
<p>affected</p>
<p>affected</p>
<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
<p>unaffected</p>
<p>affected</p>
<img style="height:20px;display:block;" src="http://via.placeholder.com/350x250" />
<p>unaffected</p>
</div>I trust this information will be of assistance to you.
I have encountered a challenge with my HTML input elements. There are two input elements that overlap each other, and I would like to make both inputs visible while only allowing the top input to be editable. I have tried several approaches involving z-ind ...
I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...
Can CSS be used to target elements based on the value of another attribute? For instance: <div data-attr1="abc" data-attr2="def"></div> <div data-attr1="abc" data-attr2="abc"></div> I am looking for something like this (although i ...
I firmly believe that separating styling from code enhances the clarity and cleanliness of the code. Personally, I have always viewed using inline styling (style={{}}) as a bad practice. In Mui V4, it was simple - I would create a styles file and import i ...
My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...
Trying to integrate content from my Veetle.com channel onto my personal website has proven to be quite the challenge. Initially, I attempted to modify an iframe with CSS to display only the schedule information, but encountered limitations due to using 3rd ...
Recently, I decided to utilize Modernizr in order to check for support of the css property background-clip: text. After some research, I came across this page:https://github.com/Modernizr/Modernizr/issues/199 I then added the following code to my website ...
add your image description hereImagine a scenario where there is a table featuring two columns. <table> <tr><td>Email</td> <td></td></tr> <tr><td>Full name</td> <td></td></tr> ...
I am encountering a spacing issue with a superfish drop down menu. The problem can be observed here: To view the issue in action, visit this link: Essentially, all of the submenu items are floated left with a 50% width. I am looking for a solution to rem ...
Currently, I am using a JQuery plugin to style a form input with type 'file'. The plugin adds a new span over the input element to create a mask effect and encloses everything in a div. However, there is an issue where the standard HTML input box ...
I've been experimenting with creating a bar graph using SVG, but I'm struggling to understand how it works. I tried rotating an existing graph upside down, but there seems to be a small offset. You can view the corresponding jsfiddle here - http: ...
I'm currently working on a dropdown menu that allows users to easily select their preferred language. I'm facing an issue with incorporating flags using https://github.com/lipis/flag-icon-css for each option. Can someone please assist me with thi ...
I'm attempting to extract all the links nested within the div class news column index. Here is a snippet of the HTML structure: https://i.stack.imgur.com/zdFWS.jpg Below is the code I have used, but unfortunately, it's not yielding any results. ...
Is there a way to create a gradient that displays a red line every x% without the colors fading into white? As I add more lines, the red stripes seem to lose their intensity and blend into a white background. The .four-stripes selector creates a good resu ...
Is there a way to center the selected image instead of it appearing on the left-hand side? Here is the current behavior: https://i.stack.imgur.com/SUWOK.jpg I am using the following packages in a sandbox environment with Next.js 11 and TailwindCSS 2.2.4: ...
My issue involves a div block with a style attribute that includes left:{{left}}px; and right:{{right}}px. Even though $scope.left and $scope.right are being updated, my item still doesn't move as expected. I have created a fiddle to demonstrate th ...
I'm a bit perplexed by this discovery and I can't quite comprehend the rationale behind it. The provided code snippet showcases two nested DIVs. The outer DIV has specific dimensions and a relative position set, while the inner DIV also has fixe ...
A method I am using involves displaying additional data on hover for a shortened header, like this: Hover behavior However, the text shifts across the page when the scrollbar is used, as shown here: Scrollbar interaction This table showcases HTML, CSS, ...
I'm attempting to place text and an image over the sublime text blank document (please visit: ) Currently, my h1 is on top of the image that I want it to be laid over. Additionally, there's another image I'd like to overlay as well. Could ...
Can anyone help with CSS coding using Wordpress Elementor to make a page only display posts from the coaching category? I attempted to use this selector article.type-post:not(.category-coaching) { display: none; }, but it doesn't seem to be functi ...