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.
My menu is made up of ul/li items with background images, but I'm having trouble adjusting the opacity and alignment of the images. While there are resources online for changing background image opacity, such as this article: https://scotch.io/tutoria ...
I am currently experiencing a problem with the code found on http://jsfiddle.net/eSbps/. This specific code pertains to a menu system that reveals second levels when hovering over the top levels, using slideDown('slow'). To prevent queuing effe ...
I am in the process of transitioning my landing page design from Bootstrap to Semantic-UI. The layout includes a fixed top navbar and main content split into two columns (3-cols and 9-cols) - the left column is reserved for a sidebar, while the right colum ...
I need assistance on applying a solid white background color to hide the text behind it. For better understanding, I have attached a screenshot as a reference. https://i.stack.imgur.com/f8Qd9.png The issue arises when I click on the dropdown in the heade ...
Here is a cool typing text effect created using HTML, CSS, and JavaScript. Check out the code below: (function($) { var s, spanizeLetters = { settings: { letters: $('.js-spanize'), }, init: function() { ...
I've been encountering some difficulties with WindiCSS. The classes are not being applied to the elements as expected. I attempted to install an older version of Windi, but the issue persisted. I even tried switching to Tailwind instead of Windi, but ...
I'm currently working on keeping the .header and .nav elements fixed in the viewport so they don't disappear from view. What's intriguing is that I'm utilizing FlexBox, but I haven't come across a FlexBox feature that allows me to ...
I am looking for a way to center align a fixed position div on my page. In the past, I have been able to achieve this with absolutely positioned divs using a specific technique. left: 50%; width: 400px; margin-left: -200px; However, this method does no ...
I'm attempting to replicate the user interface used by foursquare! Positioning the map slightly off center like they have . I've figured out how to do one part but struggling with the second part. Initially, I loaded the map in a small div (t ...
I am facing an issue with this particular code. The intended functionality is to create multiple divs in a loop, but it seems to be dysfunctional at the moment. Upon clicking, only one div appears and subsequent clicks don't trigger any response. < ...
Hey there, I'm looking to have a div stay fixed after scrolling within its parent div. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="fw ofndr-box"> <div class="ofndr-box-half add-here"> <a href="#! ...
Below is a flashcard game I have developed: Once a user enters the correct answer in the text box, "Correct!" is expected to be displayed in bold green font. The CSS attributes are then supposed to be removed shortly after. Here is the HTML code for the i ...
In my quest to create a customized jQuery slider, I encountered the need to change the background of the slider handle. After experimenting with some code on this link, I am still unable to achieve the desired effect. Following the documentation, I have a ...
I've been diligently working on a unique custom WordPress theme as part of a school project. Our task is to redesign the homepage of an association, in my case, a theater group. One of the challenges I encountered was customizing the WordPress menu t ...
I implemented a sidebar menu for mobile that opens when you click on the hamburger icon, with a dark overlay covering the body. The issue I encountered is that on mobile devices, the visibility of the menu does not change when clicked outside of it. It wor ...
I'm having trouble figuring out what's causing the issue, so I wasn't sure how to title it. Any help in looking at the code would be greatly appreciated. Here is the problem: The HR tag should be positioned below the last image and not cut ...
I've developed a custom CSS button style, which you can see here: http://jsfiddle.net/karimkhan/SgTy2/ However, when I implement the same CSS within the <style> tags on my page, the effect is not the same. It looks like this: The actual CSS on ...
Currently, I am in the process of developing a personal website that features numerous expandable items. My goal is to restrict the page scrolling to the height of the expanded item once it is opened. I do not want users to be able to scroll above or below ...
Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...
I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...