I am trying to select the list item with an anchor via css but can't figure out how to do so without selecting ALL anchors within all lists. Here is the list:
<ul>
<li class="fbar"> </li>
<li class="menuItem">
<img src="img/sample_slides/thumb_macbook.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_iphone.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_imac.png" alt="thumbnail"/>
</li>
<li class="menuItem">
<img src="img/sample_slides/thumb_about.png" alt="thumbnail"/>
</li>
</ul>
So I want to select something like
.menuItem li a {
color:red
};
but that is wrong. So what is the right way to arrange it if there is one?
I guess that this is what you want:
li.menuItem a {
border:1px solid red;
};
This will select all anchors (<a>) in any listitem with class "menuitem".
I'm not sure what you exactly want to do. Four of your list items have anchors inside. Which one do you want to select now?
You can select all anchors in all list items with class "menuItem" with li.menuItem a {color:red};. But that's not what you need, huh
You can use Javascript for that. Here's a jQuery Example
$('.menuItem').has('a').css('background-color', 'red');
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 have a nested list in my menu and I wanted the first child of the sub list highlighted when the parent is highlighted. I want to code this just by using CSS (in SCSS file format) This is a list within a list. I have list items below another list item of another
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span> <!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list"> <!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
<li class="sub-list-item">
<span>this is another list item in class="sub-list"</span>
</li>
</ul>
*EDIT: changed some of the words being used in this question to make this one understandable. and added another child item to .sub-list to make a better understanding of the issue.
The 'span' (<a>) isn't actually a parent. It's a sibling. The parent to the first child (list item) in the sub list is the <ul class="sub-sub-list">. That means they are siblings.
You can use the + selector to target siblings: https://www.w3schools.com/cssref/css_selectors.asp
.sub-list-item a:hover + ul > li:first-child {
background-color: lightgrey;
}
<ul id="sub-list">
<li class="sub-list-item">
<span>창업교육</span>
<!--serves as the parent when this is highlighted, the first child is also highlighted.-->
<ul class="sub-sub-list">
<!--sublist-->
<li class="item">창업정규교과</li>
<li class="item">창업비정규교과</li>
</ul>
</li>
</ul>
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)
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{}
I have a group of images which each have their own links. I want the images to be in a list (<ul><li> .. etc) and have each item have a different background-image.
Would I run into any issues with something like this?
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
<li class="4"></li>
<li class="5"></li>
<li class="6"></li>
</ul>
You would do better to write it like this
<ul>
<li class="1"></li>
<li class="2"></li>
<li class="3"></li>
</ul>
Then you could add the background-image to either the a or the li.
However, you would style the as as display:block and give them the same height and width of the li. That way the background-image would show and the entire li would be clickable.
It is not valid HTML because the only thing allowed in an <ul> element is <li>s.
It's not valid HTML.
<!ELEMENT UL - - (LI)+ -- unordered list -->