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;
}
Related
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>
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.
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
How can I change another class's property when one's hovering.
If I say I have A and B class, A has hover event, If I want to change inside of B when A hover, how can I do?
A:hover {}
B{ color:#FFF; }
A:hover + B{ color:#000; } didnt work
Actually CSS
.has_child is inside of .navi
.navi > ul > li:hover
+ .navi > ul > li > .has_child:after {
color: #09F;
}
HTML
<nav class="navi ">
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
General Config
</li>
<li>
Menu
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
English
</li>
<li>
</li>
</ul>
</li>
<li>
User Level
</li>
<li>
User
</li>
<li>
Tag
</li>
<li>
Log
</li>
<li>
</li>
</ul>
</nav>
Thank you very much for your advice.
==============
Update
Seem like + operator will nor work if have > before.
A:hover + B{ color:#000; } will work fine.
A:hover + C > B{ color:#000; } will not work.
Works for me.
You should check your selectors. What browser are you using?
.A must be inside .B
<div class="A">
<div class="B">
something
</div>
</div>
then in your stylesheet:
.A:hover .B { some css code }