I'm trying to create a toggle for mobile menu, but the :checked selector doesn't seem to be working.
Here is the Code:
#toggleMenuToggle:checked .nav-css {
display: none;
}
<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label>
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle">
<ul id="dropdown-nav" class="nav-css">
<li class="n1 current">
<a class="n1">Test</a>
</li>
</ul>
Shouldn't the <ul> have it's display set to none when my checkbox is checked?
Try the following solution:
#toggleMenuToggle:checked ~ .nav-css {
display: none;
}
<label class="desktop-hidden menuToggle" for="toggleMenuToggle">MENU</label>
<input type="checkbox" name="toggleMenuToggle" id="toggleMenuToggle">
<ul id="dropdown-nav" class="nav-css">
<li class="n1 current">
<a class="n1">Test</a>
</li>
</ul>
Explanation: With your solution the .nav-css element have to be a child of the checkbox (#toggleMenuToggle). But in your case the .nav-css is the following element of the checkbox, so you have to use the ~.
You want to use the + or ~ selector. The + selector selects the adjacent sibling while the ~ selector selects all sibling elements. In this case it does not actually matter which one you choose.
#toggleMenuToggle:checked + .nav-css {
display: none;
}
For a nice explanation of the selectors see https://stackoverflow.com/a/26282459/6430127
The problem with your css is that .nav-css is not a child of #toggleMenuToggle.
Try the following:
#toggleMenuToggle:checked ~ .nav-css {
display: block
}
The ~ Selects every .nav-css element that are preceded by a #toggleMenuToggle element
Related
I know can control the display of a single class by using the following CSS:
.some-random-class{
display: none;
}
input[type=checkbox]:checked ~ .some-random-class{
display: flex;
}
I understand that this code controls the display of any object with the class of "some-random-class" that is a sibling of whatever checkbox is checked. If I have 3 classes I want to control the display of, I can do so with 3 separate input "functions" addressing each class individually. What I can't quite seem to figure out is how to control multiple classes in with the same "function" and control classes that are not in the same generation as in the following HTML:
<div>
<input type="checkbox">
<div class="first-class">
stuff to hide
</div>
<div class="second-class">
stuff to hide
<input type="checkbox">
<div class="third-class">
stuff to hide
</div>
</div>
</div>
When I try to control all three using what I think logically should work, it breaks the whole thing.
The following CSS is what I thought SHOULD work, however doesn't:
input[type=checkbox]:checked ~ .first-class ~ .second-class ~ .third-class {
display: flex;
}
Is this even possible, or am I asking too much of CSS?
If what I want to accomplish is possible, what am I not understanding about the above function?
You need to separate each rule with , , not just concatenate them with ~, because that only can select a single element.
input[type=checkbox]:checked ~ .first-class,
input[type=checkbox]:checked ~ .second-class,
input[type=checkbox]:checked ~ .third-class {
color: red;
}
input[type=checkbox]:checked ~ .third-class {
color: blue;
}
<div>
<input type="checkbox">
<div class="first-class">
stuff to hide
</div>
<div class="second-class">
stuff to hide
<input type="checkbox">
<div class="third-class">
stuff to hide
</div>
</div>
</div>
Hi I'm trying to figure out the way I can access elements in div using ones class.
<div class='hs_terms_conditions field hs-form-field>
<label class placeholder='Enter your name'>
</label>
<div class='input'>
<ul class='input-list'>
<li class='checkbox>
</li>
</ul>
</div>
</div>
My question is how can I access <div class='input'> from <div class='hs_terms_conditions field hs-form-field> and then change <ul> or <li>.
Was thinking of using classes and doing something like this:
.hs_terms_conditions.input.input-list.checkbox{
/*some style*/
}
I did try it but couldn't make it work.
I want to be able to change just that <li> or <ul> inside that div so it doesn't apply on all others.
Use ">":
.hs_terms_conditions > .input > .input-list > .checkbox {
/*some style*/
}
If you use .class1.class2.class3 it will match an element which belongs to all the classes. You could also use .hs_terms_conditions .input .input-list .checkbox.
You can access to .checkbox with parent access selector :
.hs_terms_conditions > .input > .input-list > .checkbox{
/*some style*/
}
I really hope I'm not repeating an old question - I'm new to selectors so my terminology might be lacking.
I'm working on a tabbed single-page webpage based around this Default :target with CSS solution. I would like the current tab to have its link highlighted or altered in some way, to indicate the current location.
HTML:
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">This is text you should see as you load the page</div>
<div class="tab tab2">This is text that will appear after you click on tab 2</div>
CSS:
.tab {
display:none
}
.default-tab {
display:block
}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
ul#tabnav a:hover {
background: red;
}
ul#tabnav a:target{
border-width: thick;
border-color: black;
}
It seems like my last element (a:target) doesn't do anything, even though clicking on tabs does bring me to new anchors and change the displayed content. Any suggestions?
:target is the selector for the element on the page that has the id or name of the anchor name in the URL. So ul#tabnav a:target won't match anything, but if you change the selector to a:target, it will style the 2 links you have in the middle of the page, <a id="tab1"></a><a id="tab2"></a>
To style the "active" link in your navigation you'll need to use javascript to add a class on click, then style that class.
var $links = $('#tabnav a');
$links.on('click',function(e) {
e.preventDefault();
$links.removeClass('active');
$(this).addClass('active');
})
.tab {display:none}
.default-tab {display:block}
:target ~ .default-tab {display:none}
#tab1:target ~ .tab1,
#tab2:target ~ .tab2 {
display: block
}
.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<ul id="tabnav">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<a id="tab1"></a>
<a id="tab2"></a>
<div class="tab tab1 default-tab">
This is text you should see as you load the page
</div>
<div class="tab tab2">
This is text that will appear after you click on tab 2
</div>
You can use the bootstrap tabs it will solve you problem and works fine.
Please check the demo here
Hope this will solve you problem.
Happy Coding :)
I need to make a website for school. I try to use the Checkbox Hack. It works in general, but i cant implement it in my website. Here is my problem: input[type=checkbox]:checked > .menuitem doesn't seem to effect the folowing:
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li>
<li class="menuitem">About us</li>
</ul>
</nav>
I tried replacing my "> .menuitem" in input[type=checkbox]:checked > .menuitem with various things like ~ and ~ nav>ul>li But i dont have any succes. Does anybody have an idea what i need to do?
i'm looking for a effect that does this:
If (checkbox is checked) {
Hide a part of the webpage
}
On another note: I am not allowed to use anything else then HTML and CSS (So no Javascript or php etc.)
try this
input[type=checkbox]:checked + nav .menuitem
input[type=checkbox]:checked + nav .menuitem{
display:none;
}
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><label for="toggle-1"><img src="images/menu.png" height="38" width="38"/></label></li>
<li class="menuitem">About us</li>
</ul>
</nav>
The > css selector is immediate child selector, so browser search only for the first children of input tag - in this case nav element.
All you need is:
input[type=checkbox]:checked .menuitem
Eventually you can add additional tags to be more specific
input[type=checkbox]:checked nav .menuitem
Or
input[type=checkbox]:checked nav ul li.menuitem
There is fiddle with my problem.
As I can understand -- link doesn't work, because when I click on the link, link disappear because :focus isn't active anymore. But I can't come up with solution.
I think it's very common problem, but I didn't found any information about this.
Thanks for any help.
CSS:
#search:focus + #results {
display: block;
}
#results {
display: none;
}
HTML:
<input id="search" type="text"/>
<ul id="results">
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
Just add a hover method to #results:
#results:hover{display:block;}
http://jsfiddle.net/gc6L323f/3/
I would suggest in your case to include also :hover pseudo class and make the #results object visible on hover.
Like this :
#results:hover {
display: block;
}
You can check working demo.