Can I use a combination of ID and elements to apply a style to a particular element?
for example:
<ul id="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
Is there a way to apply the style="font-size:small" to all the anchors that follow the UL with the ID of 'a'?
I'd think something like #a a {font-size:small} would work, but it's having no effect in the css file.
Thanks,
Jo
Yes, use the structure of the HTML to select the anchor tags:
ul li a {
font-size:small
}
Instead of using ID use class selector, so that same class name can be used to multiple ul elemements:
.a li a { /* you can also use .a a {....} */
font-size: 40px;
color: red;
}
<ul class="a">
<li>
<a href=...>Howdy</a>
</li>
<li>
<a href=...>Doody</a>
</li>
</ul>
<ul class="a">
<li>
<a href=...>Hello</a>
</li>
<li>
<a href=...>Boy</a>
</li>
</ul>
Related
I have to select last "a" tag. Remember that "ul" is optional, sometime it will generate or sometime not.
How may I acheive it using "last-child" pseudo class.
<div class="breadcrumbs">
<span>Your location ：</span>
1
2
<ul class="list-item">
<li>
3
</li>
<li>
4
</li>
</ul>
</div>
.breadcrumbs > a:last-child, .breadcrumbs ul > li:last-child a
{
}
So, if a is the last child of a .breadcrumbs, in the case there is no ul (nor any other element following that last a),
or if there is an ul, then the a of that ul's last li.
try pseudo selector :nth-of-type it'll select last-child of anchor
.breadcrumbs *:last-of-type:not(a) *:last-of-type a{
background-color: #ccc;
}
<div class="breadcrumbs">
<span>Your location ：</span>
1
2
<ul class="list-item">
<li>
3
</li>
<li>
4
</li>
</ul>
</div>
How can i remove my image 11 from class second?
<ul class="second">
<li >
<img class="imgTwo" src="img/11.gif">
<h4>9</h4>
<h5>9.1</h5>
</li>
<li>
<img class="imgTwo" src="img/12.gif">
<h4>10</h4>
<h5>10.1</h5>
</li>
</ul>
Here you go this way:
ul.second > li:first-child .imgTwo {
display: none;
}
This way only the first one will be deleted.
I'm using [class*="menu-class-"]:not(.menu-class-2) for my <li> elements, it works properly. The problem is when I want to point to the <a> tag inside the <li>, [class*="menu-class-"]:not(.menu-class-2) a. For some reason it doesn't work.
CSS:
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) {
display: table-cell;
}
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) a {
text-transform: uppercase;
}
HTML
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3">
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
The problem is the <a> inside the <li class="menu-class-2"> is uppercase, but it should be lowercase, because I didn't add any property for this element. The container of the <a> (<li class="menu-class-2">), didn't get the display:table-cell property, so it works properly.
The JSFiddle link: http://jsfiddle.net/qnzos5t4/3/
The reason is because you do have a li that is not .menu-class-2:
<ul class="nav-menu" id="menu-main-navigation">
<li class="menu-class">
Nav 1
<ul class="sub-menu">
<li class="menu-class-3"> <!-- THIS ONE HERE -->
Nav 2
<ul class="sub-menu">
<li class="menu-class-2">Anchor, it should be lowercase</li>
</ul>
</li>
</ul>
</li>
</ul>
Since your css rule is using a whitespace to select the anchor after the li, every <a> descendant of it, will be uppercase. You need to use a child selector:
Updated JsFiddle
.nav-menu .menu-class > .sub-menu li[class*="menu-class-"]:not(.menu-class-2) > a {
SO I am trying to create a hidden drop down menu and I want only the outer li to have specific css elements. Want I want to know if you can use multiple child selectors, > , so I can apply to the links within those li 's and not have applied to the links in the smaller menus
For example:
<ul class="top">
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
and a css element would be:
ul.top > li > a {
color: red;
}
whereas I would want the a in ul.second to, a random example, have color: blue
If you want to target the "outer" links, you should do just as you wrote:
ul.top > li > a {
color: red;
}
If you want to target the "inner" links, just use any of the following selectors:
ul.top ul a {
color: green;
}
or
ul.second > li > a {
color: green;
}
I'm making a navbar that consists of icons followed by the title of their page (e.g. Icon of a home followed by the text 'Home'). Let's say I want to change the color of only(!) the icon from black (default) to blue when hovering over either the text or the icon itself using the :hover selector. How can I do that? (I don't want to use jQuery, just CSS)
The markup is now something like this:
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Of course everything is {display:inline}
Set the hover to the ul inside the navgroups. CSS below does that, you can add whatever styling you like to it.
http://jsfiddle.net/PQShS/9/
CSS:
.navgroup ul:hover .navicon{
color:#FFF;
}
Your Code
<ul id="navbar">
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-home"></i></li>
<li class="navname">Home</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-info"></i></li>
<li class="navname">Information</li>
</ul>
</li>
<li class="navgroup">
<ul>
<li class="navicon"><i class="icon-contact"></i></li>
<li class="navname">Contact</li>
</ul>
</li>
</ul>
Since it boils down to changing the look of the icon when the cursor hovers anywhere above the ul element, you can do this:
.navgroup ul:hover .navIcon .icon-home
{
/*hover style for the icon*/
}
.navgroup ul .navIcon .icon-home
{
/*non-hover style for the icon*/
}
You should use the following css:
.navgroup:hover .navicon {
background-color: blue;
}
It will modify just the navicon anytime you hover anywhere within the navgroup
See this jsFiddle
you should use anchor tag
css:
.testing:hover {
color: red;
}
html:
<a class="testing" href="">
<span>hello1</span>
<span style="color:black;">hell2</span>
</a>
Give the whole styling to <a> tag and give the inline styling to other element inside <a> tag that you don't want to change.