Is it possible to toggle two CSS `:checked` pseudo-classes with one click?
Possible you might be overcomplicating this a bit.
Why not just change your .country-selector
checkbox into a radio button in the same group? Then it has exactly the behavior you're looking for without making it a situation that requires lots of workaround. The only concern would be providing an empty value for if the user were to submit while the box is still open, but that's a concern with your existing implementation anyhow.
Codepen Example
Jade
input#country-selector(type='radio', name="country")
SCSS
&>[type=checkbox]
becomes
&>[type=radio]
I made a few styling changes to the pen as well to bring it inline with more traditional select dropdowns.
Very interesting idea. Kudos on that.
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
You could also pass the content to the pseudo element with a data attribute and then use jQuery to manipulate that:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).attr('data-content','bar');
});
In CSS:
span:after {
content: attr(data-content) ' any other text you may want';
}
If you want to prevent the 'other text' from showing up, you could combine this with seucolega's solution like this:
In HTML:
<span>foo</span>
In jQuery:
$('span').hover(function(){
$(this).addClass('change').attr('data-content','bar');
});
In CSS:
span.change:after {
content: attr(data-content) ' any other text you may want';
}
Can I have an onclick effect in CSS?
The closest you'll get is :active
:
#btnLeft:active {
width: 70px;
height: 74px;
}
However this will only apply the style when the mouse button is held down. The only way to apply a style and keep it applied onclick is to use a bit of JavaScript.
Only detect click event on pseudo-element
This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.
If you must have a click handler on the red region only, you have to make a child element, like a span
, place it right after the opening <p>
tag, apply styles to p span
instead of p:before
, and bind to it.
Make :focus change css of another class
Using pseudo-classes (such as :hover
or :focus
) to modify other elements can only be done if the other elements are siblings or children of the element which has the pseudo-class. That's because CSS child/sibling selectors are fairly restrictive.
You can use the >
selector to select a direct child, and the +
selector to select a direct sibling. For example, if you have the following HTML:
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
You could style the button when the text field has focus (because it is a direct sibling of the text field), but there is no possible way to style the arbitrary paragraph as a result of the text field receiving focus (because it is neither a child nor sibling, it is the sibling of a parent) without using client-side scripting (JavaScript, jQuery, etc.).
This CSS would style the submit button, and can be altered to select any direct or indirect child or sibling:
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color:green;
}
Using Javascript, of course, you have much greater flexibility. The focusin
and focusout
events can be used to toggle CSS classes. Here's an example that demonstrates both the CSS and JavaScript techniques of achieving this.
function setFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.add('focused');
});
}
function unsetFocused() {
document.querySelectorAll('.arbitrary').forEach((result) => {
result.classList.remove('focused');
});
}
document.querySelectorAll('input[type="text"]').forEach((result) => {
result.addEventListener("focusin", setFocused);
result.addEventListener("focusout", unsetFocused);
});
input[type="text"]:focus + input[type="submit"] {
/* some sweet CSS */
background-color: green;
}
.arbitrary.focused {
/* even more sweet CSS */
color: red;
}
<form>
<input type="text" />
<input type="submit" />
</form>
<p class="arbitrary">
This is an arbitrary element. It is neither a child nor sibling of
the text field. It cannot be selected as a result of a pseudo-class
action on the textfield using CSS, but can be selected using
client-side scripting such as JavaScript.
</p>
Is there an opposite CSS pseudo-class to :hover?
Yes, use :not(:hover)
.child:not(:hover){
opacity: 0.3;
}
.child {
display: inline-block;
background: #000;
border: 1px solid #fff;
width: 50px;
height: 50px;
transition: 0.4s;
}
.child:not(:hover) {
opacity: 0.3;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
Toggle two checkboxes with one click and without js
How about only having one checkbox? I mean, there's only one week, although it spans months it isn't two entire weeks! Consider your design, i.e. Week Ending 4/5/2012 is a week ending in May, sure it starts in April but if you're going to put your weeks in a bag, do it by something definitive if you can.
How can I add and remove an active class to an element in pure JavaScript
Use document.querySelectorAll
to find the element which currently have the active
class, then you can remove that class.
function myFunction(e) {
var elems = document.querySelectorAll(".active");
[].forEach.call(elems, function(el) {
el.classList.remove("active");
});
e.target.className = "active";
}
JSFIDDLE
Instead of document.querySelectorAll
you can also use document.querySelector
function myFunction(e) {
var elems = document.querySelector(".active");
if(elems !==null){
elems.classList.remove("active");
}
e.target.className = "active";
}
JSFIDDLE 2
Edit
Instead of iterating through the entire collection you can select the element which have a class active
using document.queryselector. Also provide an id
to the ul so that you can target the specific element
function myFunction(e) { if (document.querySelector('#navList a.active') !== null) { document.querySelector('#navList a.active').classList.remove('active'); } e.target.className = "active";}
<style type="text/css">* { margin: 0; padding: 0; box-sizing: border-box;}
header { width: 100%; height: auto; max-width: 600px; margin: 0 auto;}
nav { width: 100%; height: 40px; background-color: cornflowerblue;}
ul { list-style-type: none;}
li { display: inline-block;}
a { text-decoration: none; padding: 8px 15px; display: block; text-transform: capitalize; background-color: darkgray; color: #fff;}
a.active { background-color: cornflowerblue;}
<title>Navigation class Toggling</title>
<header> <nav> <ul onclick="myFunction(event)" id='navList'> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">service</a></li> <li><a href="#">profile</a></li> <li><a href="#">portfolio</a></li> <li><a href="#">contact</a></li> </ul> </nav></header>
Related Topics
Why Doesn't Justify-Content: Stretch Work
Bootstrap 4 CSS Causing Chrome's Print "Layout" to Disappear
Is the Hash Necessary in Svg Font-Face Declarations
Box Sizing on Inputs in Firefox Hides Text
Align Block Elements on Top When Using Line-Height
CSS Linear Gradient Transparency Misbehaving Only in Safari
Fixed Persistent Header and Scroll to Focussed Input Fields
Remove Border Around Sprite Image in Chrome
How to Use CSS Text-Overflow on Text That's Wrapping
Can CSS3 Translatez() Be Used Instead of Z-Index
Relative Padding Is Relative to What
CSS Selector for First Element of Visual (Block Reflow) Row
CSS Adding Border Radius to an Iframe
Is Decimal Precision When Specifying a Font-Size Respected by All Browsers
Is Anyone Experiencing Layout Issues After Upgrading to Chrome 72