How to change pseudo class property?


Tags: jquery,css

Problem :

I am trying to remove left border when first button clicked and right border when last button clicked too..

[enter image description here]

used some code but didn't make it.. My last attempt was $("#menu-btn-a .active:before").css("display", "none");

How to change the :before 'display:block' to 'none' when click on first button and :after to 'none' too when click on last buttons using jquery?

jQuery(function($) {
			
	// Click on button
	$("[id^='menu-btn-']").click(function() {
		$("[id^='menu-btn-']").removeClass('active');
		$(this).addClass('active');	
		if ($(this) == 'menu-btn-a') {
			$("#menu-btn-a .active:before").css("display", "none");
		}
	});	
});
body {background-image: linear-gradient(#1f1d1e, #1f1d1e);}
.buttons {white-space: nowrap;min-height: 33px;position: relative;width: 205px;margin: 6px auto;}
.buttons a {width: 50px;height: 33px;position: absolute;top: 0;text-decoration: none;padding-top: 11px;outline-width: 0px;z-index: 990;color: transparent; text-align: center;line-height: 26px;display: block;background-image: linear-gradient(#1f1d1e, #1f1d1e);}
.buttons a:not(.active) {box-shadow: inset 0 1px 1px rgba(130, 58, 11, 0.8), inset 0 -1px 0px rgba(115, 82, 60, 0.2), 0 9px 16px 0 rgba(0, 0, 0, 0.3), 0 4px 3px 0 rgba(0, 0, 0, 0.3), 0 0 0 1px #fd6a06; background-image: linear-gradient(#fffff, #ff000); text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 -1px 0 #ffffff;} 
.buttons a:not(.active):hover,
.buttons a:not(.active):focus {transition: color 200ms linear, text-shadow 500ms linear;color: #de610f;text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #de610f;}
.buttons a:not(.active):active {color: #e4e3ce !important}
.buttons a.active,
.buttons a:active {box-shadow: 0 9px 16px 0 rgba(0, 0, 0, 0.1), 0 0 0 1px #1f1d1e, 0 2px 1px 0 rgba(143, 100, 71, 0.5), inset 0 0 4px 3px rgba(15, 8, 22, 0.2); background-image: linear-gradient(#964208, #de610f); text-shadow: 0 0 21px rgba(223, 206, 228, 0.5), 0 0 10px rgba(223, 206, 228, 0.4), 0 0 2px #dc620f;color: #ffffff;}
.buttons a.active:before,
.buttons a:active:before {position: absolute;display: block;content: "";width: 1px;height: 36px;top: 1px;left: -2px;background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: -2px 0 6px 0 #ff7012; }
.buttons a.active:after,
.buttons a:active:after {position: absolute;display: block;content: "";width: 1px;height: 36px;top: 1px;right: -2px;background-image: linear-gradient(rgba(91, 35, 105, 0), #ff7012 41%, #ff7012 59%, rgba(91, 35, 105, 0));box-shadow: 2px 0 6px 0 #ff7012;}
.buttons a.active {z-index: 1000}
.buttons a:active {z-index: 999}
.buttons a:last-of-type {border-radius: 0 7px 7px 0;}
.buttons a:first-of-type {border-radius: 7px 0 0 7px;left: 0;}
.buttons a:nth-of-type(2) {left: 51px}
.buttons a:nth-of-type(3) {left: 102px}
.buttons a:nth-of-type(4) {left: 153px}
.buttons a:nth-of-type(5) {left: 204px}
.buttons a:nth-of-type(6) {left: 255px}
.buttons a:nth-of-type(7) {left: 306px}
.buttons a:nth-of-type(8) {left: 357px}
.buttons a i:before {margin-left: 2px;font-size: 18px;}
.buttons a i.icon-bar-chart:before {font-size: 20px;margin-top: 0px;}
.buttons a i.icon-sync:before {font-size: 20px;margin-left: 3px;margin-top: 1px;}
.buttons a i.icon-download:before {font-size: 19px;margin-top: 1px;margin-left: 4px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='buttons'>
      <a id="menu-btn-a" class="active" href="#" title="A">&#x2606;</a>
      <a id="menu-btn-b" class="" href="#" title="B">&#x262F;</a>
      <a id="menu-btn-c" class="" href="#" title="C">&#x267A;</a>
    </div>

Thanks!



Solution :

Your css display none is correct but I think you should change:

if ($(this) == 'menu-btn-a') {

To:

if ($(this).attr('id') == ''menu-btn-a') {

Or you can solve this entirely in css (though I'm not sure about the selector order):

.buttons a:first.active:before { display:none; } 

One that will definitely work is:

.buttons a#menu-btn-a.active:before,
.buttons a#menu-btn-a:active:before { display:none; } 

    CSS Howto..

    How to change css style of Kendo Combobox

    How to get the image height of an image to set another div height

    Using CSS, how do I move a DIV to the left of the centre position?

    Why is Nexus 4 (using Chrome for Android) showing window size as 384x519 but screenshot shows 768x1038?

    How to target html area maps with css

    How to style the values in a textfield using CSS?

    How do i split user inputed text into individual characters?

    How to move content in ul to the center HTML + CSS

    How can I hide a button when scrolled to the top of a page?

    How can I make width flexible with CSS when using bootstrap's responsive design?

    How to create an email template from a responsive website?

    How to make header in css but im using opacity?

    How to make common reusable css for almost every common things in web design?

    How to interchange table cells using Pure CSS

    how to apply css property to my first div class only

    How can I enqueue Internet Explorer specific stylesheets in the Wordpress functions folder?

    How can I keep my CSS transform (rotate & skew origin) from moving a few pixels to the right?

    How to animate sections in pure CSS when scrolling the page?

    How to structure css using BEM methodology for adaptive web pages?

    Javascript slide showing the last image 5 times

    How to center multiple divs inside a container in CSS

    How to center webpage content

    How to import css dynamically with js?

    How to change opacity in disabled state of image in css

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How can I set up a static Webkit Mask

    draggable without jquery ui: how to stop dragging the not-draggable and type-able elements?

    text-rendering in css, what is it? and how to use it?

    how to repeat a small background image througout the page?

    How to place buttons next to each other using css Bootstrap