I'd like to target the first occurence of the <a> element in this list, first-child doesn't seem to work because it selects all the children <a> s. Any ideas?
<li class="cat-item cat-item-1 current-cat">
<a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>
<ul class="children">
<li class="cat-item cat-item-19">
<a title="View all posts filed under Article List" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=19">Article List</a>
<ul class="children">
<li class="cat-item cat-item-20">
<a title="View all posts filed under Mobile" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=20">Mobile</a>
<ul class="children">
<li class="cat-item cat-item-21">
<a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=21">Current</a>
</li>
</ul>
</li>
<li class="cat-item cat-item-22">
<a title="View all posts filed under Desktop" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=22">Desktop</a>
<ul class="children">
<li class="cat-item cat-item-23">
<a title="View all posts filed under Current" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=23">Current</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
You would need to target the first li and then it's anchor link
ul li:first-child a {
/* your styles here */
}
It difficult to be more specific but if you were referring to the children ul you can make it
ul.children > li:first-child a {
/*your styles here */
}
If you mean this
<li class="cat-item cat-item-1 current-cat">
<a title="View all posts filed under Basket" href="http://machinas.com/wip/esprit/wiki/wordpress/?cat=1">Basket</a>
The css would be
li.cat-item.cat-item-1.current-cat > a {
/*styles */
}
If by "this list" you mean the root, you could do:
.current-cat > a
Not sure if you're using jQuery on your site, but if so, you can work with jquery and do this.
$("a").first().attr("title");
Etc.
As I said, it depends if you're using jQuery and it can be used for what you'd like to do, but since you didn't specify what you plan to do with the result, it's hard to assume otherwise.
Related
I want to hide this bit: <li class="categories">Kατηγορίες<ul> as seen in the code below (also see here https://poiimata.com/poets/):
<li class="categories">Kατηγορίες<ul>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
I tried using
.categories {
display:none;
}
but the result was to hide all items below that one (the whole list).
That happen because you've an invalid HTML code in :
<li class="categories">Kατηγορίες<ul>
_________________________________^^^^
The browser will evaluate your code to the below format, that why all your li's become hidden :
<ul>
<li class="categories">Kατηγορίες
<ul>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
</li>
</ul>
Instead it should be :
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
Snippet:
.categories {
display: none;
}
<ul>
<li class="categories">Kατηγορίες</li>
<li class="cat-item cat-item-123">Robert Frost
</li>
<li class="cat-item cat-item-124">Shlain
</li>
</ul>
It appears you just have an error in your HTML. You use an incorrect closing tag and therefore hide the entire thing.
<li class="categories">Kατηγορίες<ul> <!--- closed <li> with <ul> --->
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
Try instead:
<ul class="categories">
<li >Kατηγορίες<li>
<li class="cat-item cat-item-123">
<a href="https://poiimata.com/category/robert-frost/" >Robert Frost</a>
</li>
<li class="cat-item cat-item-124">
<a href="https://poiimata.com/categoryshlain-goldberg/" >Shlain</a>
</li>
</ul>
and change CSS to
.categories:first-child {
display:none;
}
That's just one way of accomplishing it. There are quite a few different angles you can take.
Since li contains tags that you do not need to hide, you need to masked the hidden text. for example like this:
.categories {
font-size: .1%;
}
.categories ul {
font-size: 100000%;
}
if only child elements is not a bug...
This is proving very difficult. Nav is pasted pasted below. This is a wordpress website so while I could change the structure of the html I'd rather not.
It looks like the nested drop down menus <ul> are contained within parent <li> elements.
My goal is to have, on hover, the list items be orange with 0.4 opacity. I would also like this for the drop down menu line items. Except, the problem is, that when hovering over a line item that has a drop down nested within it, the 0.4 opacity seems to apply to the whole menu, as opposed to just the hovered one. I have tried numerous things. Here is a taste of what I have tried:
.dropdown > ul li:hover { // the styling in question. Everything below is an attempt to limit this from affecting the whole drop down menus.
background-color: orange;
opacity:0.4;
}
.dropdown > ul.children li:hover, .dropdown > ul.children:hover { // trying to select just the drop down menu and take of the opacity by setting it to 1
opacity: 1;
}
ul.children li:hover { // similar to above just another attempt
opacity: 1;
}
ul.children, ul.children:hover, ul.children li, ul.children li:hover{ // just resorting to trying everything now
opacity: 1;
}
I made a fiddle too: http://jsfiddle.net/m7owomb0/
See how when you hover over the menu items with drop downs it's transparent? Then click on one of the actual links and the styling from the live site loads into the frame. When you hover there it's not transparent and you can see the items clearly. I just want them to be orange when hovered.
<div id="main-navigation">
<nav>
<div class="dropdown dropdown-horizontal">
<ul class="main-nav">
<li class="current_page_item">
<a href="http://dduck8977.webfactional.com/">
Home
</a>
</li>
<li class="page_item page-item-57">
<a href="http://dduck8977.webfactional.com/?page_id=57">
Clear Outs & Offers
</a>
</li>
<li class="page_item page-item-8 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=8">
Flooring
</a>
<ul class='children'>
<li class="page_item page-item-19">
<a href="http://dduck8977.webfactional.com/?page_id=19">
Chestnut
</a>
</li>
<li class="page_item page-item-15">
<a href="http://dduck8977.webfactional.com/?page_id=15">
Douglas Fir
</a>
</li>
<li class="page_item page-item-12">
<a href="http://dduck8977.webfactional.com/?page_id=12">
Heart Pine
</a>
</li>
<li class="page_item page-item-17">
<a href="http://dduck8977.webfactional.com/?page_id=17">
Maple
</a>
</li>
<li class="page_item page-item-10">
<a href="http://dduck8977.webfactional.com/?page_id=10">
Oak
</a>
</li>
</ul>
</li>
<li class="page_item page-item-50 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=50">
Locations
</a>
<ul class='children'>
<li class="page_item page-item-52">
<a href="http://dduck8977.webfactional.com/?page_id=52">
New York
</a>
</li>
<li class="page_item page-item-55">
<a href="http://dduck8977.webfactional.com/?page_id=55">
Philadelphia
</a>
</li>
</ul>
</li>
<li class="page_item page-item-21 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=21">
Paneling
</a>
<ul class='children'>
<li class="page_item page-item-31">
<a href="http://dduck8977.webfactional.com/?page_id=31">
Barn Wood
</a>
</li>
<li class="page_item page-item-27">
<a href="http://dduck8977.webfactional.com/?page_id=27">
Eastern Mix
</a>
</li>
<li class="page_item page-item-29">
<a href="http://dduck8977.webfactional.com/?page_id=29">
Mushroom Wood
</a>
</li>
<li class="page_item page-item-23">
<a href="http://dduck8977.webfactional.com/?page_id=23">
Oak
</a>
</li>
<li class="page_item page-item-25">
<a href="http://dduck8977.webfactional.com/?page_id=25">
Pine & Fir
</a>
</li>
</ul>
</li>
<li class="page_item page-item-40">
<a href="http://dduck8977.webfactional.com/?page_id=40">
Patchwork
</a>
</li>
<li class="page_item page-item-37 page_item_has_children">
<a href="http://dduck8977.webfactional.com/?page_id=37">
Reclaimed Wood
</a>
<ul class='children'>
<li class="page_item page-item-47">
<a href="http://dduck8977.webfactional.com/?page_id=47">
Lumber Phrases
</a>
</li>
<li class="page_item page-item-42">
<a href="http://dduck8977.webfactional.com/?page_id=42">
Wood Types
</a>
</li>
</ul>
</li>
<li class="page_item page-item-35">
<a href="http://dduck8977.webfactional.com/?page_id=35">
Shelving
</a>
</li>
<li class="page_item page-item-33">
<a href="http://dduck8977.webfactional.com/?page_id=33">
Tables
</a>
</li>
</ul>
</div>
</nav>
</div>
How can I add styling so that hovered line items are orange with opacity 0.4, without affecting nested ULs within these line items?
You cannot override opacity in child elements, use rgba instead.
.dropdown > ul li:hover {
background-color: rgba(255,165,0,0.4);
}
I was having some rendering issues with the old-style menu control getting Chrome to look correct, so I decided to switch and use the CSS Friendly Adapters (http://cssfriendly.codeplex.com/) to get my menu control to render as a list and hopefully have some more cross-browser consistency, well that hasn't worked either!
So I have styled my menus and they now work great with Chrome, Safari and Firefox, but not IE I have a basic horizontal list loaded from a datasource, with 1-13 items in the dynamic lists attached to them. In Chrome and Firefox now, after the menu is styled the dynamic menu items are appearing properly below the static menu items. But in IE(7/8) the dynamic menu items are appearing directly to the right of the currently hovered over static menu item (and with the first dynamic item behind the static menu item to the right of the current one)
Here is a screenshot of the menu working properly in Chrome:
http://i42.tinypic.com/2d3lom.png
And a screenshot of the same menu being hovered over in IE (in this case 8, but it looks the same in 7):
http://i39.tinypic.com/2vmc4kn.png
Here is the rendered HTML for the menu:
<div class="AspNet-Menu-Horizontal" id="ctl00_navMenu">
<ul class="AspNet-Menu">
<li class="AspNet-Menu-WithChildren AspNet-Menu-Selected">
Home
<ul>
<li class="AspNet-Menu-Leaf AspNet-Menu-ParentSelected">
Home
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
<a href="javascript:void(0);" class="AspNet-Menu-Link">
Financial Systems</a>
<ul>
<li class="AspNet-Menu-Leaf">
Input Sales
</li>
<li class="AspNet-Menu-Leaf">
Upload Sales
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Reports
<ul>
<li class="AspNet-Menu-Leaf">
Prior
</li>
<li class="AspNet-Menu-Leaf">
Summary
</li>
<li class="AspNet-Menu-Leaf">
Monthly
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Administration
<ul>
<li class="AspNet-Menu-Leaf">
Shop Tracker
</li>
<li class="AspNet-Menu-Leaf">
Shop Upload
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Metrics
</li>
<li class="AspNet-Menu-Leaf">
Weekly Comp Upload
</li>
<li class="AspNet-Menu-Leaf">
Estimate Maintenance
</li>
<li class="AspNet-Menu-Leaf">
User Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Corporate Users
</li>
<li class="AspNet-Menu-Leaf">
Country ISO Code Maint
</li>
<li class="AspNet-Menu-Leaf">
Territory Rollup Maint
</li>
<li class="AspNet-Menu-Leaf">
Content Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Edit System Message
</li>
<li class="AspNet-Menu-Leaf">
Menu Maintenance
</li>
<li class="AspNet-Menu-Leaf">
Change Password
</li>
</ul>
</li>
<li class="AspNet-Menu-WithChildren">
Help
<ul>
<li class="AspNet-Menu-Leaf">
<a href="help.aspx" class="AspNet-Menu-Link">
Help Menu</a>
</li>
</ul>
</li>
</ul>
</div>
And here is my CSS (same for IE and Chrome, but in the Chrome stylesheet I just add a gradient below this):
.AspNet-Menu li {color:#000000;line-height:20px;border:none;font-size:11px;font-weight:bold;}
.AspNet-Menu-WithChildren {width:150px;text-align:center;color:#FFFFFF;background:#940000;}
.AspNet-Menu-Selected {color:#000000;}
.AspNet-Menu-WithChildren a {color:#FFFFFF;}
.AspNet-Menu-Selected a {color:#000000;background:#FFCB0B;}
.AspNet-Menu-Leaf {background:#F0F0F0;width:150px;}
.AspNet-Menu-Leaf a {color:#000000;}
.AspNet-Menu-Leaf :hover, .AspNet-Menu-Leaf a :hover {background:#666666;color:#FFFFFF;}
Maybe try adding:
CSS
ul .AspNet-Menu-WithChildren ul {top:100%; float:none;}
I'm thinking that might force IE to put it where you need it to be. Not 100% sure, and wasn't able to try it on my local machine.
i´m having some difficulty applying style override to all widgets in my wordpress theme. I created the theme from scratch, so I have absolutely NO IDEA how they got these bullets got there.
I want to remove the bullets from items in the lists. The html is:
<li id="categories-3" class="widget widget_categories"><h2 class="widgettitle">Categories</h2>
<ul>
<li class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li class="cat-item cat-item-5">Music News (50)
</li>
<li class="cat-item cat-item-6">Ramblings (43)
</li>
<li class="cat-item cat-item-7">Site News (14)
</li>
<li class="cat-item cat-item-8">Stuff I Like (25)
</li>
</ul>
</li>
</div>
This is the code I came up with so far that doesn't seem to be working:
li#categoryposts-3 li.cat-item {list-style: none;}
I have no idea what to do at this point.
It has to be
li#categories-3 {background-image: none; list-style: none;}
li#categories-3 li.cat-item {background-image: none; list-style: none;}
There is a wrong id
You need two styles
li.widget ul,
li.widget li { list-style: none; }
#categoryposts-3 ul {
background-image: none; list-style: none;
}
Use the !important keyword in your css, like this:
li{
list-style:none !important;
}
The code below removes the bullets from a list.
<li style="list-style: none;" class="cat-item cat-item-4">Big Notch Updates (20)
</li>
<li style="list-style: none;" class="cat-item cat-item-5">Music News (50)
</li>
<li style="list-style: none;" class="cat-item cat-item-6">Ramblings (43)
</li>
<li style="list-style: none;" class="cat-item cat-item-7">Site News (14)
</li>
<li style="list-style: none;" class="cat-item cat-item-8">Stuff I Like (25)
</li>
when my primary menu is like item menu1/submenu1.2, de li gets the class active, so i can style it, for example in a different color.
however, if i go to page menu1/submenu1.2/153 then the active class is missing.
Or anything like menu1/submenu1.2/* is the active class missing.
How can I solve this?
In your example of menu1/submenu1.2/153 the active class should have moved to 153. You can still style submenu1.2 differently by looking for the active-trail class on the <li>
For example, if you go to admin/content/comment the menu's html should look similar like this:
<ul class="menu">
<li class="expanded active-trail">
Administer
<ul class="menu">
<li class="expanded first active-trail">
<a title="Manage your site's content." href="/drupalsite/?q=admin/content">Content management</a>
<ul class="menu">
<li class="leaf first active-trail">
<a class="active" title="List and edit site comments and the comment moderation queue." href="/drupalsite/?q=admin/content/comment">Comments</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That means you can style the admin and content links by using CSS something like the following:
li.active-trail a {
/*Whatever style here*/
}