I have the following HTML:
<nav class="SecondaryNav sideMenu">
<ul class="Nav_TopUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
<span class="Nav_Span"></span>
<span class="Nav_SubMenuIndicator"></span>
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<img class="Nav_Img" alt="media image">
</a>
<ul class="Nav_SubUL">
<li class="Nav_LI">
<div class="Nav_ItemWrapper">
<a class="Nav_A">
<span class="Nav_Span"></span>
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</nav>
What I am trying to select is the UL with the class "Nav_SubUL" but only where it is a sibling of an 'a' with a class "Nav_A" that has an image and a span with a class ".Nav_Span"
Thats a mouthful I hope it makes sense!
Here is what I have tried so far but have not had much luck. CSS is not my strong point so it might be that this has a really obvious answer but I cannot for the life of me get there.
.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span + .Nav_SubMenuIndicator ~ .Nav_SubUL {
margin-top: 265px;
}
.SecondaryNav.sideMenu .Nav_A > .Nav_Img + .Nav_Span ~ .Nav_SubUL {
margin-top: 265px;
}
Thanks in advance everyone
I worked it out in the end by applying some additional classes on the parent nav element.
Thank you all for your help and suggestions as always. Sometimes all you need is a helpful community to give you the nudge you need to get you to your result. Thanks again.
Happy coding!
I think you can go with something as
a.Nav_a ~ ul.Nav_SubUL {
color: pink;
}
You can go with
a.Nav_a ~ ul.Nav_SubUL {
}
as dantefff mentioned, but you cannot check for children of a.Nav_a with css only - you'd have to use javascript.
Or do something different with your divs and their classes.
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 <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 am trying to align a button properly as a secondary content within a collection. However, no matter what I try, I cannot get the button centered. See image below:
Current Layout
Code snippet:
<div class="section">
<ul class="collection with-header">
<li class="collection-header">
<h5>Drawing basics</h5>
</li>
<li class="collection-item">
<div>Public Policy and the Community<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
<li class="collection-item">
<div> Introduction to Geology Studies
<button class="btn waves-effect waves-light right"> Create
</button>
</div>
</li>
<li class="collection-item">
<div> Global Perspective<i class="material-icons">delete</i><a href="#!" class="secondary-content"><i class="material-icons">edit</i><a href="#!" class="secondary-content"><i class="material-icons">remove_red_eye</i></div>
</li>
</ul>
</div>
What can I do to solve this? I've tried almost everything.
Well I couldn't get it to work as I'd like to but it works with this hardcode....
.fix{
float: right;
margin-top: -8px;
}
https://jsfiddle.net/ggcewqaL/2/
Maybe this answer is a bit late but here is the fix without the need for an additional CSS class.
<ul class="collection with-header">
<li class="collection-header"><h4>Drawing basics</h4></li>
<li class="collection-item"><div>Public Policy and the Community<i class="">remove_red_eye</i></div></li>
<li class="collection-item">
<div>Introduction to Geology Studies
Create
</a>
</div>
</li>
<li class="collection-item"><div>Global Perspective<i class="material-icons">remove_red_eye</i></div></li>
</ul>
I just added an anchor tag inside the second div and styled it with .btn class
Create
I hope this would be helpful for someone at least!
I have been working on this for a while and I am not finding a good answer to it.
I have:
<section class="s-one">
<section class="s-two">
<a class="a-one>
</a>
.
.
.
</section>
</section>
<section class="s-three">
<ul class="ul-one>
<li>
<span>xxx</span>
</li>
</ul>
.
.
.
</section>
When I hover over any one a element to modify it, I want to also modify a corresponding span element (an "a-one" pairs with the span in ul "ul-one, and so on).
I've tried all sorts of selectors and combinators, and so far all I can get is modifying all spans in s-three by using:
.s-one:hover ~ .s-two span { display: block;},
Not each individual one which would correspond to each individual <a>. Sorry if I am not clearer on this; I will be glad to provide clarification.
Here's a quick JS mock-up showing the behavior you want.
http://codepen.io/anon/pen/WQGoej
<section class="s-one">
<section class="s-two">
<a class="a-one">I'm a link
</a>
</section>
</section>
<section class="s-three">
<ul class="ul-one">
<li>
<span>I'm a span</span>
</li>
</ul>
</section>
.hovered{
background: black;
color: white;
}
$(document).ready(function(){
$('a').hover(function(){
$('span').toggleClass("hovered");
});
});
How can I convert my 6x to CSS
I have the
<ul data-role="listview"
data-inset="true"
data-theme="d"
data-divider-theme="e"
data-count-theme="a"
>
<li>
<img src="https://www.lifewire.com/thmb/SY5rof4hEZ4WkWqolEFWwZEIqAI=/774x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/yahoo-logo-2019-879b7bed612d4bbc97065dce2a0f2d73.png"
alt="yahoo-mail"
class="ui-li-icon"/>
Yahoo!
<span class="ui-li-count">3</span>
</li>
</ul>
following code:
Remove all the and use padding:
a{padding-left:20px}
Do this:
<ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="e" data-count-theme="a">
<li>
<img src="/css/images/yahoo-mail.png" alt="yahoo-mail" class="ui-li-icon"/>
<span class="link-text">Yahoo!</span><span class="ui-li-count">3</span>
</li>
</ul>
CSS:
.link-text:before {
content: ' '; /* 6 spaces */
}
Give span tag in a tag.
<span></span>Yahoo!
then give padding to span.
There's many ways to do this. I'd probably add a margin to the icon image:
.ul-li-icon {
margin-right: 20px
}