I want to know if it's possible to click on an element and then change another element only using Html and CSS and if it is then how.

some thing like this ( btw this code doesn't work ) :

a:active div{
    background-color : blue;
}

CodePudding user response：

Without Javascript your options are rather limited. You have to find a way to toggle the state by a click and be able to express those states in CSS.

Some option might be theese:

• using (hidden?) radiobuttons or checkboxes and using their :checked pseudo class in CSS
• using anchors and their pseudo classes (like you already attempted to do)

The problem here is that you have to put all your dynamic contents (the stuff you show/hide on click) inside or next to those toggling elements which might be inpractical.

My favorite is the :target pseudo class. When you open the URL "https://something.com#foobar" the element with the id "foobar" is the current target (if it exists). One limitation of this is that there is only one single target per document. You can control the target by clicking on anchors like this:

.dynamic-content {
  display: none;
}

#first:target, #second:target {
  display: block;
}

<div>
  <div id="first" class="dynamic-content">
    First dynamic content
    <a href="#">Hide</a>
  </div>
  <div id="second" class="dynamic-content">
    Second dynamic content
    <a href="#">Hide</a>
  </div>
</div>

<a href="#first">Show first</a>
<a href="#second">Show second</a>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

One way ,I use :focus pseudo class. div:focus a {}