0

I have this in CSS :

#box:target {
    box-shadow: 0px 0px 20px black;
}

On a "parent" page (page1), I have a button that makes you go to another page : "page2.html#box". So the #box:target is applied when I the page is loaded. But with a button on the page1, I activate a function which purpose is to change the #box:target properties. I'm looking for a way to change this in javascript. Not :focus.

Alex
  • 81
  • 1
  • 2
  • 12
  • `box-shadow property, after activate a function` can you please elaborate it – brk Feb 25 '19 at 10:04
  • 2
    Your question is pretty unclear. `:target` has **nothing** to do with focusing. Are you asking about focusing or targetting? – Quentin Feb 25 '19 at 10:04
  • Can you just use :focus pseudo class with different styling https://developer.mozilla.org/en-US/docs/Web/CSS/:focus ? – maximelian1986 Feb 25 '19 at 10:23
  • I would suggest using `:focus` or `:hover`. If you want a smoother animation and to avoid a [repaint](https://stackoverflow.com/questions/2549296/whats-the-difference-between-reflow-and-repaint), I would suggest setting your additionnal box-shadow on the pseudo elements `:before` and animating it (see [How to animate box-shadow](http://tobiasahlin.com/blog/how-to-animate-box-shadow/)) – Jake Feb 25 '19 at 10:29

1 Answers1

1

Notice to Readers

This Answer Concerns the Original Post First Draft

The OP has been edited to an entirely different question. So if this answer is confusing, you'll need to review the edits. I apologize for any inconvenience.

:target

You do not need JavaScript for simple style switch. It appears that you have misunderstood the requirements needed to implement :target pseudo-class.

Requirements

  1. Two <a>nchor tags and a tag of any type as the target.

        <a>ON</a>  <a>OFF</a>  <section>SECTION</section>

    One <a> will "turn on" the new <section> style and the other <a> will "turn it off".

  2. Next, the <section> needs an #id. Both <a> need an href attribute. The values of each href is different from the other and is specific (see comment below this example): 

          <a href="">ON</a>     <a href="">OFF</a>  <section id="S">SECTION</section>

    ON: Must be    ☝         OFF: Must be a ☝
    the #id of target: #S    "non-jumping" value #/

  3. In the CSS, add two rule sets:

    1. The first one is the target tag at default (OFF): 
      #S { width: 44vw; height: 44vw; border: 4px solid #444 }
    2. The second one is the target tag activated (ON). Suffix the :target pseudo-class: 
      #S:target { text-shadow: 4px 4px 4px 4px #444; }

  4. Here's what the HTML layout should look like more or less:

       <a href="#S">ON</a>  <a href="#/">OFF</a>  <section id="S">SECTION</section>

Demo

html,
body {
  font: 900 10vh/1 Consolas;
}

a {
  color: blue;
}

a:hover,
a:active {
  color: cyan;
}

#B {
  box-shadow: 12px 5px 8px 10px inset rgba(0, 0, 0, 0.4);
  border: 6px inset rgba(0, 0, 0, 0.8);
  width: 40vw;
  height: 40vh;
  font-size: 20vh;
  text-shadow: 4px 7px 2px rgba(0, 0, 0, 0.6);
}

#B:target {
  box-shadow: 12px -5px 4px 4px rgba(0, 0, 0, 0.4);
  text-shadow: 4px -3px 0px #fff, 9px -8px 0px rgba(0, 0, 0, 0.55);
}
<a href="#B" class='on'>ON_</a><a href="#/" class='off'>OFF</a>

<figure id='B' class='box'>
  <figcaption>BOX</figcaption>
</figure>
zer00ne
  • 41,936
  • 6
  • 41
  • 68
  • I think you missunderstood my question. I just want to modify the css rules when the element is targeted, change for instance the boxShadow property. I perfectly know what :target is for. – Alex Feb 25 '19 at 16:09
  • I absolutely didn't ask an other question. Yous just don't understand at all what I want – Alex Feb 26 '19 at 14:16
  • Explain to me what `.box:target` supposed to do and why there's no mention of a child or parent page in the first version of the post? Concerning the most current version, why did you change `.box:target` to `#box:target`? Also what is the significance of a parent and child page if there isn't any ` – zer00ne Feb 26 '19 at 22:54
  • Excuse me to not master the HTML perfectly, there are people who learn you know. So can't you just be normal please and explain me ? – Alex Feb 28 '19 at 14:16
  • And :target is used when the ilement is targeted with his id by an a tag with href="#element" – Alex Mar 02 '19 at 11:37