I am looking to modify color of two separate divs with just using pure CSS. Currently, I have only been able to alter the color of one div using a single href attribute. Is it achievable using solely CSS?
#link1:target{color:red;}
#link2:target{color:green;}
margin-top:20px;<a href="#link1 ">Make links change color</a>
<!-- <a href="#link1 #link2">Make links change color</a> //this not working-->
<div id="link1">
link1
</div>
<div id="link1">
link2
</div>To create a unique look, you can enclose it in a div with the specified id.
Here's an example:
#customID:target {
background-color: blue;
}<a href="#customID">Click here to see change in color</a>
<div id="customID">
<div class="box1">
box1 content
</div>
<div class="box2">
box2 content
</div>
</div>To achieve the desired result without altering your markup, you can implement the following CSS code which utilizes the adjacent sibling selector and assumes that the margin adjustment is required in that specific location. However, please keep in mind that an ID can only be used once on a page, so it would be advisable to change the 2nd instance to id="link2".
#link1:target {
color: red;
}
#link1:target + #link1 {
color: green;
margin-top:20px;
}<a href="#link1 ">Make links change color</a>
<div id="link1">
link1
</div>
<div id="link1"> <!-- make this one id="link2" -->
link2
</div>Having trouble applying styles to a Material-UI chip with an outlined variant when hovering, but the expected results are not showing. The border color changes to white as intended, but for some reason, the background color remains unchanged. I'm st ...
I'm currently working on developing a method to incorporate space for error messages within my form input group component. The main objective is to prevent any displacement of elements on my forms when displaying error messages. In this scenario, it ...
I'm currently working on a WordPress theme and running into an issue with utilizing SASS from another file using the @use method. For those of you who may not know, the @import rule method will soon be deprecated which is why I am trying to implement ...
Is it possible to make a link change color when clicked, and have that color stay until another link is clicked? How can I achieve this using the "active" attribute? I attempted it, but the link reverts back to its original color after clicking. &l ...
Here is my code snippet for a Bootstrap 5 navbar: <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar& ...
How can I export data to Notepad? I have fields for Name, Age, and WorkingStatus that are input as text and textarea. Is there a demo or code available to help me insert this data into Notepad? ...
Show the database value in the optgroup option. If the value of the parsing controller is equal to the option's value, do not display it within the HTML tag. Value of the parsing controller: {{$getData->status}} This is how my view blade looks: ...
Adding a new section above the current <nav>. This is what I hope will occur. https://i.sstatic.net/HBaYN.png Below is my code: https://jsfiddle.net/rLc588mu/ Appreciate your assistance! ...
We are in the process of adding a new tab and I am following the existing code to make the necessary edits. However, I have encountered an issue at this specific point which is where the target page is being called. Could someone please explain how this pa ...
I recently incorporated selectize capability into the selectInputs within a column of a DT datatable in my Shiny app. Following some guidance provided here, I implemented JavaScript to enhance the style and search functionality of selectize. However, due t ...
Having trouble displaying a custom Facebook image on the share button. I am testing from localhost, could that be the issue (unable to test in production yet)? The image address is sourced from the web and I have tried various options. <meta property=" ...
Can someone please help me with a JavaScript code to close the current window? I have tried the following code but it does not seem to work: <input type="button" class="btn btn-success" style="font-weight: b ...
I have a navigation menu in which I have icons positioned after the text using CSS :after: a.pro-serv:after { content: url('../imgs/pro.png'); position: absolute; top: 65px; left: 50%; margin-left: -31px; } The icons are set to ...
Currently, I am working on creating a unique design for the footer of my website. However, when implementing it, I encountered an issue that is causing a horizontal scroll (red background added for clarity). https://i.sstatic.net/K4vnV.jpg To address thi ...
A web application utilized Bootstrap, featuring a toggle navigation for the sidebar drawer/navigation that was supposed to be animated by default. However, there appeared to be no animation happening. To address this issue, the following CSS code was imple ...
After successfully using jQuery.ajax() to make an ajax call to an MVC action, I decided to switch to using the XMLHttpRequest along with the HTML5 File API due to some forms containing file controls. However, since making this change, the MVC action no lon ...
I'm attempting to create a basic structure with a header in the top row, menu and content in the middle row, and footer at the bottom. Here is what I have so far: body { color: white; } .container { background: cyan; display: grid; ...
My experience with a jquery slideshow has been great overall, but there's one issue I'm encountering. For some reason, Google Chrome is not displaying round borders on the images "div" even though I've specified the CSS round border style sp ...
I'm looking to create a wave effect on the content overlaid on a wave background using three.js.https://i.sstatic.net/eEN6U.png While I've successfully implemented the wave effect, I now want the content to move up and down along with the backgr ...
When checkbox1 is checked, I want to hide div1 and show div2. I've attempted the code below, but it didn't work as expected. <script type="text/javascript"> function valueChanged() { if ($('.checkbox1').is(":checked" ...