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
Related
Consider the following HTML structure:
<input type=radio name=picker value=foo> <input type=radio name=picker value=bar> etc
<ul>
<li class=foo>Foo #1</li>
<li class=bar>Bar #1</li>
<li class=foo>Foo #2</li>
<li class=bar>Bar #2</li>
</ul>
I want to style those list items which match the currently-selected radio button. This works if all the possible radio button values are hard-coded:
input:checked[value=foo] ~ ul li[class~=foo] {
background: blue;
color: white;
}
input:checked[value=bar] ~ ul li[class~=bar] {
background: blue;
color: white;
}
Is there any way to say "input:checked" and then "li[class~=[the value of the currently-selected input]]" ? Assume that the radio buttons and list items are all dynamically generated.
If all else fails, I can dynamically generate the CSS too, but that seems unideal.
This seems to be a fundamental limitation of CSS (as of 2019 - if this changes in the future, someone can post a different answer). Since the input controls have to be script-generated anyway, it's simplest to script-generate the CSS as well.
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'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
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.