Sometimes working with wordpress can be a pain. Im trying to style a menu that is generated by wordpress.
here is the basic html
<div class="footer">
<!--Generated By Wordpress-->
<ul class="menu">
<li class="menu-item">
<a></a>
<ul class="sub-menu">
<li class="menu-item">
<a></a>
</li>
</ul>
</li>
</ul>
<!--End Generated-->
</div>
I want to create some CSS to target specifically the <a> within the sub menu, without messing with the <a> in the main menu. Also I cant mess with any other menus I have set up on the site, so this also must be specific to the footer menu.
Would this be the proper method?
.footer .sub-menu a { }
What would be the proper method for this?
Actually you are right the following ways are appropriate:
1
.footer .sub-menu a{}
2
.footer ul.sub-menu a{}
3
ul.sub-menu a{}
Related
I have to make a few changes to the menu of my company's website, including a dropdown menu. The thing is, our website is made with Prestashop, which kind of messed up the hierarchy of the HTML. It pretty much looks like this:
<ul class ="menu">
<li>
<a href="" class="sf-with-menu">
<ul class ="submenu">
<li>
<a href="">
</li>
<li>
<a href="">
</li>
</ul>
</li>
</ul>
I want to have the ul with the class .submenu open when I hover on .sf-with-menu, which are both at the same level in the page's hierarchy. Is that possible only with CSS? I'm very limited with Prestashop regarding the HTML, since I've read changing the HTML would basically break everything when we update our modules, so I'd like to stick to CSS only if possible.
I suppose you could use the + selector, which selects "elements that [are] placed immediately after (not inside) the first specified element," like this:
<ul class ="menu">
<li>
Anchor
<ul class ="submenu">
<li>
<a href="">One
</li>
<li>
<a href="">Two
</li>
</ul>
</li>
</ul>
<style>
.submenu {
display: none;
}
.sf-with-menu:hover + .submenu {
display: initial;
}
</style>
This applies the styles to every instance of .submenu placed immediately after .sf-with-menu, when hovering over .sf-with-menu.
It will only highlight the first instance though, as you can see in this demo, so if you have the structure:
.menu
li
.sf-with-menu
.submenu
// stuff in menu
.submenu
// stuff in menu
...then only the first submenu will be opened on hover.
See here for more CSS info.
I am trying to understand selectors if I had something like
#topbar .ink-navigation ul.black li a.logoPlaceholder
does it mean I can issue a
<li class="logoPlaceholder">
or
Test</li>
There are lots of css selector tricks you can do, I started studying css selector in this CSS game
But let me answer what's that selector is calling ..
#topbar .ink-navigation ul.black li a.logoPlaceholder
so basically this select an a tag element that has a class of logoPlaceholder inside an li that is also inside in a ul tag with a class .black which is also inside in a element with a class .ink-navigation with a parent element that has an id topbar
Edit: Added a code to demonstrate what I mean:
<nav id="topbar">
<div class="ink-navigation">
<ul class="black">
<li>
//Selectors call this element.
<a class="logoPlaceholder"></a>
</li>
</ul>
<ul class="white">
<li>
//Selectors won't call this because li tag was not inside a ul with a class of black.
<a class="logoPlaceholder"></a>
</li>
</ul>
</div>
</nav>
The second one is correct.
a.logoPlaceholder
Means that the <a> tag has the class logoPlaceholder, like this:
`<a class="logoPlaceholder" href="#">Link text</a>`
In fact, it is also telling you that the basic HTML scaffolding looks something like this:
<tag id="topbar">
<tag class="ink-navigation">
<ul class="black">
<li>
<a href="#" class="logoPlaceholder">
The elements that are labelled tag are not specified, so impossible if they are DIVs or NAV or ASIDE or SECTION or ? (But, I would guess the first one is a NAV and the second is a DIV)
I have this structure:
<div id="sidebar">
<ul>
<li>
"Main item"
<ul>
<li class="cat-item cat-item-21">
"Child item"
</li>
</ul>
</li>
It's generated and I cannot modify it. But, using CSS, I want to make the "Main Item" unclickable, using:
pointer-events:none
How can I acces the first "li" in the "ul" and modifiy his CSS without touch the rest ?
You need to use the > identifier to only specify to go one level deep per element you're looking at such as...
#sidebar > ul > li > a{ pointer-events:none }
This will select only the first a of the first li of the first ul inside #sidebar
Guys can anyone tell me why I can't remove the list-style-type from the <ul> below using the specificity defined below the html.
<footer><!-- this is where the footer starts-->
<div class="container_12">
<div class="grid_2">
<ul>
<li>
<strong>
test
</strong>
</li>
<li>
Home
</li>
<li>
Why
</li>
<li>
Get Started
</li>
<li>
Customers
</li>
<li>
Careers
</li>
</ul>
footer ul {
list-style-type:none;
margin:0px;
padding: 0px;
}
I've also tried footer div div ul {} but I can't seem to address the ul element.
Css class needs to be called .footer ul {...}, and footer has to actually use it: <footer class="footer"> - because in IE6, and any other browser that doesn't understand HTML5 tags, <footer> is renamed to <div> by whichever solution you are using, so the css selector would not apply any longer...
UPDATE: check in any browser developer tools if anything is overriding your style, or try forcing it with list-style-type: none !important;
Your example definitely references the Unordered List without issue, both examples in fact. Perhaps you have other conflicting styles which are giving you the issue?
To see it working click here. Please notice that I have put a red border around it to help make it clearer.
I have a css sprite navigation bar where the li's are wrapped in a href tags for linking...
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
It works fine for me in Safari, Chrome, Opera & IE - but the links aren't active in Firefox, and when I look at the code in Firebug, Firefox renders the a href and li tags as separate lines:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
Any tips? Thanks!
li elements are the only elements that can be children of ol or ul. Your HTML is invalid at the moment.
Please wrap the lis around the as.
You'll want to style up the a inside the li making it's width and height 100%, here's some other suggestions:
http://doctype.com/make-li-clickable-target-url
Why not just put the anchor tags inside the LI elements? That's how it's usually done.
<ul> doesn't support <a> as a child, your html is not properly formatted, try this instead:
<div id="header">
<ul>
<li id="supplements-link"></li>
<li id="tutorials-link"></li>
<li id="blog-link"></li>
</ul>
</div>
You need to put a's inside li's, and then display: block; in your CSS, this will make the whole li a link instead of just the text, which I think is what you're probably trying to achieve?
That way you then add padding etc to your <a> tag to make the link blocks bigger. This will solve the FF issue:
CSS:
#header ul li a {
display: block;
padding: 10px;
}
HTML:
<div id="header">
<ul>
<li id="supplements-link">Supps link</li>
<li id="tutorials-link">Tuts link</li>
<li id="blog-link">Blog link</li>
</ul>
</div>