This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 2 years ago.
I have a burger menu made with the input method. When the input is checked I want to make the hamburger icon disapper and make an "X" appear. Is that possible? How can I trigger the class of the burger icon in the :checked pseudo?
Here the html
<nav>
<label class="label" for="burger"><img src="images/hamburger.svg" class="hamburger" width="63px" alt="icona menu"></label>
<label class="labelx" for="burger"><img src="images/xicon.svg" class="xicon" width="55px" alt="icona x per chiudere menu"></label>
<input class="hamburgerinput" type="checkbox" id="burger">
<ul class="menu">
<li class="item home"><a class="menuitem menuitemactive" href="index.html">Home</a></li>
<li class="item cani">Cani</li>
<li class="item gatti"> Gatti</li>
<li class="item comeaiutarci">Come aiutarci</li>
<li class="item contatti">Contatti</li>
</ul>
</nav>
To change the style of the labels, the input needs to be moved to the top of the nav. This will allow the labels to be targeted using the ~ selector, which means "any sibling". So input:checked ~ .label will match ANY sibling with the class label if the input is checked.
Here is a raw example of what you need
.labelx,
.menu,
input:checked ~ .label {
display: none;
}
input:checked ~ .labelx,
input:checked ~ .menu {
display: block
}
<nav>
<input class="hamburgerinput" type="checkbox" id="burger">
<label class="label" for="burger"><img src="images/hamburger.svg" class="hamburger" width="63px" alt="icona menu"></label>
<label class="labelx" for="burger"><img src="images/xicon.svg" class="xicon" width="55px" alt="icona x per chiudere menu"></label>
<ul class="menu">
<li class="item home"><a class="menuitem menuitemactive" href="index.html">Home</a></li>
<li class="item cani">Cani</li>
<li class="item gatti"> Gatti</li>
<li class="item comeaiutarci">Come aiutarci</li>
<li class="item contatti">Contatti</li>
</ul>
</nav>
Related
I have a radio button that, when I check it, should affect another element.
I couldn't do it. I've tried to affect a couple of elements. Nothing worked.
My HTML markup:
<label for="1">
<div class="card card-1">
<input class="card__input-1"type="radio" name="card" id="1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
SASS:
.card__input-1:checked .card-1{
background-color: orangered;
}
No error messages.
You can use the + or ~ CSS selectors to affect elements following the input in the document flow, but which share the same parent, like so:
.card__input-1:checked ~ .card-1 {
background-color: orangered;
}
<label for="1">
<input class="card__input-1"type="radio" name="card" id="1">
<div class="card card-1">
<h4 class="card__header">10 GB / <span class="card__header--price">0$</span></h4>
<ul class="card__list">
<li class="card__list-item">10GB Space</li>
<li class="card__list-item">Sync Devices</li>
<li class="card__list-item">Free Forever</li>
<li class="card__list-item">No Credit Card Required</li>
</ul>
</div>
</label>
The + selector allows you to select an element that appears immediately after within the document flow, and the ~ selector allows you to select any element that follows (so is sort of like a "super-plus" selector).
But to affect parent elements you will need to use JavaScript
I'm trying to change a wrapper's background color by pressing the checkbox.
.switch_1:checked~.table_wrapper {
background: black;
}
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>
</li>
<div class="table_wrapper">
</div>
If you can't change the DOM structure, you can't do it with CSS but you can do it with JS.
$(".switch_1").change(function () {
$('.table_wrapper').toggleClass('active');
});
.table_wrapper.active {
background: black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
</div>
</li>
<div class="table_wrapper">
asd
</div>
Here's what would work. The element needs to be a sibling (side-by-side) for it to work.
There's currently no "parent selector" in css: Is there a CSS parent selector?
So I think your best option to deliver the functionality you're working towards would be with javaScript.
.switch_1:checked~.table_wrapper {
background: black;
}
<li class="nav-item">
<div class="switch_box box_1">
<input type="checkbox" class="switch_1">
<div class="table_wrapper">hello</div>
</div>
</li>
I have pagination
How can I change background of pagination__link with text "left" when click on the other links? It is necessary to use only CSS.
You can do this, but frankly it's messy, using CSS flexible-boxes along with the relatively new :focus-within pseudo-class. This does require reversing the order of <li> elements within the <ul> however:
.pagination {
/* sets the display to use the flex layout: */
display: flex;
/* ensures the contents of the <ul> are shown in
columns and in reverse-order: */
flex-direction: column-reverse;
}
/* selects first the <li> that has a focused element
within it, then finds all subsequent <li> elements,
using the general-sibling combinator ('~') that
also matches the :last-child pseudo-class (there can,
obviously, be only one) then finds the <a> element(s)
which is a child of that <li> element: */
li:focus-within ~ li:last-child > a {
background - color: red;
}
<ul class="pagination">
<li class="pagination__item pagination__item--active">
<a class="pagination__link" href="#">
Page 2
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
Page 1
</a>
</li>
<li class="pagination__item">
<a class="pagination__link" href="#">
left
</a>
</li>
</ul>
External JS Fiddle demo.
References:
:focus-within.
flex-direction.
General Sibling Combinator (~)
"Using CSS Flexible Boxes" (MDN).
input[name="radio"]{
display: none;
}
label{
text-decoration: underline;
color: blue;
}
input[name="radio"]:checked + label{
background-color: yellow;
}
<ul class="pagination">
<li class="pagination__item">
<input type="radio" id="radio1" name="radio" />
<label for="radio1">left</label>
<!--
<a class="pagination__link" href="#">
left
</a>
-->
</li>
<li class="pagination__item">
<input type="radio" id="radio2" name="radio" />
<label for="radio2">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 1
</a>
-->
</li>
<li class="pagination__item pagination__item--active">
<input type="radio" id="radio3" name="radio" />
<label for="radio3">Page1</label>
<!--
<a class="pagination__link" href="#">
Page 2
</a>
-->
</li>
</ul>
Maybe it's not the answer what you want.
But I think it can be good hint for your problem.
You can use the checkbox trick or radio trick.
I have a list of items inside of <li> tags in a search tray. I want the user to be able to tap anywhere inside of the <li> tag to toggle the checkbox in the same way that tapping a related label toggles a checkbox.
This is the height and width of the entire <li>:
This is the height and width of the label:
This is how they are set up:
<ul id="catalogs" class="list-group collapse in">
<li class="list-group-item" ng-repeat="catalog in catalogs">
<input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
<label for="{{catalog.id}}">{{catalog.title}}</label>
</li>
</ul>
Is this possible?
you may use display, position and text-indent
label {
display:block;
text-indent:1em;
}
input {
position:absolute;
}
li {
/* demo purpose */ border:solid;
}
<ul id="catalogs" class="list-group collapse in">
<li class="list-group-item" ng-repeat="catalog in catalogs">
<input type="checkbox" id="{{catalog.id}}" name="{{catalog.id}}" ng-model="searchParams.catalogs[catalog.id]" ng-click="refreshCriteria()" />
<label for="{{catalog.id}}">{{catalog.title}}</label>
</li>
</ul>
<div id="header" class="top-bar">
...
</div>
<div id="specificdiv" class="top-bar">
<ul>
<li>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
</div>
<div id="footer" class="top-bar">
...
</div>
I need to exclude style for specific <li> tags under div id="specificdiv".
I could exclude first element using this
.top-bar li:not(:first-of-type) {
float: none;
}
but how to remove rest 2 as well?
Use the direct descendant selector >. It only selects the immediate descendants of the targeted parents.
You could use #specificdiv ul > li and it will only select li on the first level of children.
And as BoltClock pointed out, you should wrap the li whose parent is a li inside of a ul.
<div id="specificdiv" class="top-bar">
<ul>
<li>
<ul>
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
</ul>
<li>
</ul>
</div>
Why don't you just add class for the <li>, that you want to style?
Example:
<ul>
<li class="someClass">
<li class="dropdown active">
<li class="dropdown active">
<li class="dropdown active">
<li>
</ul>
And then your style:
.someClass{
float:none;
}
#specificdiv li:not(:first-of-type)
{
float: none;
}
it will work.
# is used to select element by id. example #my will select element which has id=my
for that you need nth-child(an+b) you can use it like this
li:nth-child(2){
..
}
li:nth-child(3){
..
}
now you hve a lot of alternative
ul li:nth-child(3n+3) {
color: #ccc;
}
li:nth-child(4n-7) { /* or 4n+1 */
color: green;
}
and if you want to check special lis use the > like this
div#pecificdiv ul.myList >li:nth-child(odd) {
color: green;
}
check this link for useful nth-child recipes
http://css-tricks.com/useful-nth-child-recipies/
and this
http://css-tricks.com/how-nth-child-works/