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>
Related
I am relatively new to Sass so apologies if the answer to this question is straightforward. I am building a navbar component and would like to style the entire navbar (.main-header) when hovering over specific icons (.navbar-links and .navbar-title). So far, I have tried setting the .main-header element to a variable ($h: &) as well as using #at-root to no avail. Any and all suggestions would be much appreciated.
Example of the behavior I am looking for:
.navbar-links:hover
results in
.main-header{
background: red;
}
code:
<nav className='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li className='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
You can use pointer-events: none; at the header and set the children to pointer-events: auto; so you can manage it with hover like this:
.main-header {
pointer-events: none;
}
.main-header:hover {
background-color: red;
}
.navbar-item {
pointer-events: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<nav class='main-header'>
<div className='navbar-title'>
<a href='/blog/home'>
<h2 className='navbar-title-text'>REVIEWS</h2>
</a>
</div>
<ul className='navbar-links'>
<li className='navbar-item'>
<a href='/blog/home'>
<FaHome className='navbar-icon' />
</a>
</li>
<li class='navbar-item'>
<a href='/blog/television'>
<FaTv className='navbar-icon' />
<div className='navbar-text'>TELEVISION</div>
</a>
</li>
</ul>
</nav>
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 have a <li class="jobs-dashboard1"> I'd like to target with CSS. The problem is that it's not responding, so I wondered if it's possible to specify somehow with the id of the parent <ul> like so:
#adminmenu.jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</li>
This didn't work, and I don't know why.
If you see Jobs in the screenshot... that's one of them I'm trying to target.
The site is https://adsler.co.uk if that helps, but it's a backend modification.
Where are you adding this CSS? You cannot add it to typical CSS files that you use on your website, because those are all loaded on the Frontend, and not loaded in the Wordpress Dashboard.
You also shouldn't have to target your item with an ID before the class, if the item has its own class already, and is only used on that item. If you use this class on more than one item then you can specify an ID or other selector.
Add this to the end your functions.php or a custom plugin
Here is the original posted solution:
add_action('admin_head', 'custom_admin_css');
function custom_admin_css() {
echo '<style>
.jobs-dashboard1 {background: green;}
</style>';
}
Here is another way that should also work.
add_action( 'admin_head', 'custom_admin_css' );
function custom_admin_css() { ?>
<style>
.jobs-dashboard1 {background-color: green; }
</style>
<?php }
Well, you have missed a space in your CSS declaration.
it should be,
#adminmenu .jobs-dashboard1 {background-color: green;}
Hope this helps!
It is because you have more layers of nodes over the ".jobs-dashboard1". So you could use this:
#adminmenu #menu-dashboard .wp-submenu .jobs-dashboard1{background-color: green;}
or if you want a cleaner way:
#adminmenu li ul .jobs-dashboard1{background-color: green;}
It works, Please check the below snippet. Also check CSS Combinators
#adminmenu .jobs-dashboard1 {
background-color: green;
}
<div id="adminmenuback"></div>
<div id="adminmenuwrap">
<ul id="adminmenu">
<li class="wp-first-item wp-has-submenu wp-has-current-submenu wp-
menu-open menu-top menu-top-first menu-icon-dashboard menu-top.
first" id="menu-dashboard">
<a href='index.php' class="wp-first-item
wp-has-submenu wp-has-current-submenu wp-menu-open menu-top menu-
top-first menu-icon-dashboard menu-top-first">
<div class="wp-menu-
arrow">
<div></div>
</div>
<div class='wp-menu-image dashicons-before
dashicons-dashboard'><br /></div>
<div class='wp-menu-
name'>Dashboard</div>
</a>
<ul class='wp-submenu wp-submenu-wrap'>
<li class='wp-submenu-head' aria-hidden='true'>Dashboard</li>
<li class="wp-first-item current">.
Home</li>
<li><a href='update-core.php'>Updates
<span class='update-plugins count-37'><span class='update.
count'>37</span></span></a></li>
<li class="jobs-dashboard1"><a href='https://adsler.co.uk/jobs-dashboard/' class="jobs.
dashboard1">Jobs</a></li>
<li class="post-job1"><a href='https://adsler.co.uk/post-a-job/' class="post-job1">Post A
Job</a></li>
<li class="events-dashboard1"><a href='https://adsler.co.uk/your-events-dashboard/' class="events.
dashboard1">Events</a></li>
<li class="post-event1"><a href='https://adsler.co.uk/post-an-event/' class="post-event1">Post
An Event</a></li>
</ul>
</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 tried This from stackoverflow
which i haven't been able to get to work..
i have .playlist-list and .playlist-feature where only one should be displayed, with a radio button to check on.
so which ever radio button is checked, it should display : block the div. and hide the other.
but it is somehow not working..
I can start out with .playlist-feature being displayed fine, where i check on another button. but here it does not seem to work..
any idea as to a solution to this ?
My code:
html:
<div class="playlist-top">
<label for="playlist-button">Spilleliste</label>
<label for="playlist-feature-button">Indslag</label>
</div>
<input type="radio" id="playlist-list-button" />
<input type="radio" id="playlist-feature-button" />
<div class="playlist-content">
<div class="playlist-list">
<ul class="bar">
<li>
<span>12:36</span ><p class="text- uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span>
<p>You Belong to me</p>
</li>
</ul>
</div>
<div class="playlist-feature">
<ul class="bar">
<li>
<span>08:51</span><span class="dr-icon-audio-boxed"></span>
<p>Gærdesmutten er sej trods sin beskedne størrelse</p>
</li>
</ul>
</div>
</div>
My CSS
#playlist:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-feature{
display:block;
}
}
}
#playlist-list-button:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-list{
display:block;
}
.playlist-feature{
display:none;
}
}
}
#playlist-feature-button:checked ~div.playlist-toggle{
.playlist-wrapper .container .playlist-content{
.playlist-feature{
display:block;
}
.playlist-list{
display:none;
}
}
}
I think this one useful for you with jquery
Put this code in your header,
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.playlist-list{
display: block;
}
.playlist-feature{
display:none;
}
</style>
<script>
$(document).ready(function () {
$('input[type=radio][name=rb1]').change(function () {
if (this.value == 'playlist-list-button') {
$('.playlist-list').show();
$('.playlist-feature').hide();
}
else if (this.value == 'playlist-feature-button') {
$('.playlist-feature').show();
$('.playlist-list').hide();
}
});
});
</script>
And HTML like this
<div class="playlist-top">
<label for="playlist-button" >Spilleliste</label>
<input type="radio" value="playlist-list-button" id="playlist-list-button" name="rb1" checked="" class="rb1" />
<label for="playlist-feature-button" >Indslag</label>
<input type="radio" value="playlist-feature-button" id="playlist-feature-button" name="rb1" class="rb1"/>
</div>
<div class="playlist-content">
<div class="playlist-list">
<ul class="bar">
<li>
<span>12:36</span ><p class="text- uppercase">brian adams</p><span class="dr-icon-audio-boxed"></span>
<p>You Belong to me</p>
</li>
</ul>
</div>
<div class="playlist-feature">
<ul class="bar">
<li>
<span>08:51</span><span class="dr-icon-audio-boxed"></span>
<p>Gærdesmutten er sej trods sin beskedne størrelse</p>
</li>
</ul>
</div>
</div>
i got it to work with this:
because the playlist-content is right under the input, it seems it could access it through that. so i could display the div and hide it at will.
and the class on .playlist-button was wrong.. it should have been .playlist-list-button.. no idea why i didn't see that before..
#playlist-feature-button:checked ~ div.playlist-content {
.playlist-feature {
display: block;
}
.playlist-list {
display: none;
}
}