Good day, colleagues, the question is: How to change the style of the element when you click on another element?

Example: I have this button

Google button

<a href="#space"> <span class="button2"> <span class="myfirstchar">G</span>OOGLE </span> </a>

How when pressing the button the first letter changed color to red (for example)?

    3 answers 3

    More as an option

     a { text-decoration: none; display: block; width: 10rem; height: 5rem; line-height: 5rem; background: #111; color: #fff; border-radius: 4px; text-align: center; letter-spacing: 4px; font-family: sans-serif; text-transform: uppercase; font-size: 1.5rem; } a:first-letter { color: cornflowerblue; } a:focus:first-letter{ color: tomato; } 
     <a href="#space"> GOOGLE </a>

    • Thanks, but I needed to do exactly as a button, but this is easy to fix if in the line a: focus: first-letter replace “focus” with “active”. - Severe Ereves

    You can do it on the basis of the checkbox , without any scripts and with the correct state saving:

     .logo input { display: none } .logo input + label { background-color: #0b0b0b; border-radius: 4px; border: 4px solid #065284; -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); color: white; cursor: pointer; display: inline-block; font: 1.5rem sans-serif; letter-spacing: 4px; padding: 0.5rem 1rem; text-transform: uppercase } .logo input + label span { color: cornflowerblue } .logo input:checked + label span { color: tomato } 
     <span class="logo"> <input type="checkbox" id="logo" /> <label for="logo"><span>G</span>oogle</label> </span>

    The bottom line is that the checkbox secretly stores the state, affecting the page through the style :checked pseudo- :checked . The user, in turn, can change this state through the associated label .

    Added by:

    If you need to block the reverse switching, you can organize a substitution of the label for a non-interactive div when the checkbox is activated:

     .logo input + label, .logo .active { background-color: #0b0b0b; border-radius: 4px; border: 4px solid #065284; -webkit-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); -moz-box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); box-shadow: inset 0px 0px 42px 0px rgba(6,82,132,1); color: white; display: inline-block; font: 1.5rem sans-serif; letter-spacing: 4px; padding: 0.5rem 1rem; text-transform: uppercase } .logo input + label { cursor: pointer; } .logo input + label span { color: cornflowerblue } .logo .active span { color: tomato } /* Логика переключения */ .logo input, .logo input:checked ~ label, .logo input:not(:checked) ~ .active { display: none } 
     <span class="logo"> <input type="checkbox" id="logo" /> <label for="logo"><span>G</span>oogle</label> <div class="active"><span>G</span>oogle</div> </span>

      For example:

       $('.btn').on('click', function(e){ e.preventDefault(); var $this = $(this), chart = $this.find('.myfirstchar'); if(!$this.hasClass('changeColor')){ $this.addClass('changeColor'); } else { $this.removeClass('changeColor'); } }); 
       a { text-decoration: none; display: block; width: 10rem; height: 5rem; line-height: 5rem; background: #111; color: #fff; border-radius: 4px; text-align: center; letter-spacing: 4px; font-family: sans-serif; text-transform: uppercase; font-size: 1.5rem; } .myfirstchar { color: cornflowerblue; } .changeColor .myfirstchar { color: tomato; } 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="#space" class="btn"> <span class="button2"> <span class="myfirstchar">G</span>OOGLE </span> </a>