When I click the second radio button in Chrome, why does paragraph 2 stay highlighted and paragraph 4 doesn't get highlighted? Is this a bug with Chrome?
HTML:
<input type="radio" name="toggler" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
<input type="radio" name="toggler" />
<p>Paragraph three</p>
<p>Paragraph four</p>
CSS:
:checked + p + p {
color: red;
}
It seems like your issue is similar to the one discussed in this post:
Dealing with Webkit bug involving `:hover` and multiple adjacent-sibling selectors
A simple workaround is to include :checked ~ p {} (even if it's empty) and it should resolve the problem:
It's interesting how the behavior is affected by the relationship between the <p> and input elements, with one being siblings and not children of the other. I found a workaround where you wrap each input and p block in a div, and then use the ~ selector...
Here's the CSS:
input:checked ~ p + p {
color: red;
}
And here's the HTML:
<div>
<input type="radio" name="accordion" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
</div>
<div>
<input type="radio" name="accordion" />
<p>Paragraph three</p>
<p>Paragraph four</p>
</div>
Check out the demo here.
UPDATE:
I noticed that adding this CSS to the original HTML also makes it work. The second selector style being empty doesn't seem to affect it, though...
input:checked + p + p {
color: red;
}
p:nth-child(2){}
Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...
I've encountered an issue with my website that includes JS accordions. Strangely, they are not opening on the live site, but they function properly on Codepen. I checked the console in Chrome and found no error messages, however, when I looked at the ...
Here is the code snippet I am working with: Whenever the carousel transitions to the next image, the current image disappears before displaying the next one. I am using react-bootstrap version 5.1.0, but it seems like there may be an issue with the transi ...
I'm currently working on developing a text content slideshow using only CSS. Here is the HTML/CSS code I have: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow examp ...
One way to implement smooth scrolling to an anchor on page load is by using jQuery. Here's an example code snippet: $(function(){ $('html, body').animate({ scrollTop: $( $('#anchor1').attr('href') ).offset(). ...
I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...
We've created a browser-based app using AngularJS and are currently testing it with a group of clients. One major challenge we're facing is explaining how to "Empty Cache and Hard Reload" using the Chrome browser (by pressing F12, then clicking o ...
My code is giving me some trouble. I want the div with text to stay at the bottom of the hero section with a transparent background. When that div reaches the top, it should stick with a black background. The issue is that I have set it in the javascript v ...
Currently, my wordpress blog has a unique theme and is powered by Jetpack. I've activated Sharing and added various social media sharing services like Facebook, Twitter, Google+, Digg, among others in the "Enabled Settings" section. However, the sha ...
Recently, I developed a compact geolocation watch using the following code snippet: navigator.geolocation.watchPosition( this.updateLocation.bind(this), this.errorLocation.bind(this), {enableHighAccuracy: true} ); The function updateLocation ...
Exploring the use of div to create the desired layout but struggling to achieve my goal .skills-container { height:50px; /* aiming for around 50px */ padding:5px; } .skill-pic { width:48px; height:48px; } .skill-content { } .skill-content p { } .progres ...
Below is the CSS code I am currently using within an inline style: <div class="home-hero" style="background-image: url(https://dummyimage.com/300); background-position: 100% center; background-repeat: no-repeat; background-size: cover; height: 100%; wi ...
My flask application was running smoothly in a virtual environment until I encountered an issue with the html borders not showing up. Even after seeking help from a friend who knows some html, the problem still persists. app.py: from flask import Flask, r ...
I just added the file to my git repository and shared the link here. Is there a specific way to do this? html{ background-image:url("https://github.com/vindhya97/images/blob/master/pinkbackground.jpg"); } ...
I have experience using ExtJS in the past to create dashboards, and one of my favorite features is the full-screen viewport with a border layout. This allows for easy splitting of a dashboard into panels on different sides without creating excessive scroll ...
How can I ensure that the image resizes correctly on smaller screens? Currently, the image spills over the container and there are gaps between the top/left of the container and the image. Should I adjust the image size in the media query or expand the con ...
Is there a simple and efficient way to have some of my links trigger the 'save file as' prompt (similar to right-clicking) immediately after they are clicked for the first time? ...
Working with the most up-to-date version of Bootstrap, I am currently designing a search bar featuring a dropdown menu preceding the search button. Upon clicking the dropdown, various controls are revealed. Below is the HTML code for this configuration: ...
This is the CSS code I created: img{width:85%; height:auto;} #thumbwrap { position:relative; } .thumb img { border:1px solid #000; margin:3px; float:left; } .thumb span { position:absolute; visibility:hidden; } .thumb:hover, .thu ...
I'm facing a few issues with my visualization: Despite aligning it to the center, the text on my first button is positioned at the right end of the button. How can I move the text 'login' to the center? Currently, the 'Sign Up Her ...