This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 8 years ago.
<div>
<ul>
<li>Do something with this element</li>
<li></li>
</ul>
<ul id="someId">
<li>This element:hover</li>
<li></li>
</ul>
</div>
I wonder if it is possible to select the first li element of the first ul if I hover on the first li element of the second ul element.
I've tried selectors like:
#someId li:first-of-type:hover:parent:parent ul:first-of-type li:first-of-type
But it obviously doesn't work. I want to avoid using JavaScript and changing the HTML structure is not an option. Adding classes and IDs isn't a problem.
Is this selector possible with CSS3?
Without JS you can't change dom elements. At first give id or class to ul, after it use jquery .hover () function. And use first-child element for getting li of ul.
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
I want to apply CSS to the ul li elements following a div section. Using CSS selectors, how to I select the li elements that follow a specific div? I thought it would be this but it does not work
div span.survey_one ~ div ul li{
list-style-type:none;
font-size:1.2rem;
}
Here is the HTML:
<div><span class="survey_one">dddddddddddddd</span>
<br>
</div>
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
You're using the general sibling combinator
The way it is now the general sibling selector is selecting the sibling of <span class="survey_one">dddddddddddddd</span>, which is only the <br>.
Try setting the general sibling to this instead div ~ div ul li
div ~ div ul li{
list-style-type:none;
font-size:1.2rem;
color: red; //added for illustrative purposes
}
<div><span class="survey_one">dddddddddddddd</span>
<br>
</div>
<div>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</div>
I think it's best you place the two div in parent container and select the li like
.parent li
Or to achieve your initial aim, use javascript to
1. Select the parent element of the first div using the survey_one class
2. Transverse to child li of the parent node
Either way, you should place the two divs in a parent container
I want to write a horizontal tag list as navigator. I read some css files online, and find the following (desendant?) selector style in a single css file:
nav ul li a { ...}
nav a {...}
nav ul li {...}
I know the for 2, nav a means select all the "a" elements under nav class. But what about 1. and 3.?
Does 3. means select all the "li" insinde "ul", and the "ul" should also inside "nav"? It seems to me that 1 and 2. will have similar effect. But I cannot find an answer online.
The first means that it will apply to all <a> elements inside a <li> which is inside <ul> which is within a <nav>. In other words, it will style code that looks like this:
<nav>
<ul>
<li>
<a>...</a>
</li>
</ul>
</nav>
The reason that selector 1 and selector 2 will apply to the same elements is because if you notice <nav><ul><li><a>...</a></li></ul></nav>, the <a> is both times inside the <nav><ul>...</ul></nav>. The first selector is just more restrictive than the second selector, but because everything inside a <ul> is always supposed to also be inside a <li> element, the selectors should always apply to the same elements.
The third selector will apply to <li> elements inside a <ul> which is inside a <nav>, just like you said. In other words:
<nav>
<ul>
<li>...</li>
</ul>
</nav>
Edit: As #Hughes suggested, something to note here is the concept of "specificity." When there are multiple rules that apply to the same object, there is often times a need to break ties. For instance, what happens if we have this code?
nav ul a { color: blue; }
nav ul li a { color: green; }
It's up to CSS to determine which font colour to apply to <nav><ul><li><a> ... </a></li></ul></nav>. In these cases, CSS chooses the rule which is more specific when describing which elements it applies to. In this example, the <a> would be coloured green, because the nav ul li a rule is more specific when describing the elements that the rule should apply to (just think of the English definition for the word "specific"). Thus while both selector 1 and selector 2 from the question should apply to the same objects, if they ever both provide the same CSS property, the value in selector 1 would be chosen over the value in selector 2.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
help me understand this code:
css
nav ul ul{
display: none;
}
nav ul li:hover > ul {
display:block;
}
html
<nav>
<ul>
<li>1</li>
<li>2
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3
<ul>
<li>2.3.1</li>
<li>2.3.2</li>
</ul>
</li>
</ul>
</li>
<li>3
<ul>
<li>3.1</li>
<li>3.2</li>
</ul>
</li>
<li>4</li>
</ul>
</nav>
Question:
Why become visible when you hover the mouse (2.3) elements "2.3.1 - 2.3.2" I guess that will become visible only elements 2.1 - 2.3 according to the line "nav ul li: hover> ul"?
I think this:
nav ul ul{
display: none;
}
Uses the display property to tell a <ul> element inside a <ul> and a <nav> element not to be displayed. Then this
nav ul li:hover > ul {
display:block;
}
Means that when a <li> element inside a <ul> and <nav> is hovered over, it tells the <ul> element, probably only the one inside, to be displayed as a block element.
working example here
Example of space separated CSS here, and the use of :hover here.
Hope this helps...
This all has to do with CSS Combinators. You cna find information here on all CSS3 Selectors and Combinators.
The two combinators in question here are " " (or a space) and the ">" characters. The [space] combinator is referred to as the descendant combinator. The ">" symbol is referred to as the direct descendant combinator.
Given this selector... nav ul li:hover > ul {} you could verbosely say: Apply these properties to a UL element that is directly descendant to any LI element which is being hovered that is descendant of any UL element that is descendant of any NAV element.
The above selector consequently applies to your 2.3.1 for example.
If you instead wrote:
nav > ul > li:hover > ul {}
Then your 2.3.1 LI would no longer become visible, as we are selecting specifically the second level of UL elements in the nav, and not any UL that is part of an LI.
My page generates two ULs of the same ID and I would like to remove the last one via CSS (display: none). I was trying with :last-child property but no luck at all. I either made both of them disappear or none of them.
Example:
<div id="content">
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
<ul id="some-ul">
<li>...</li>
<li>...</li>
</ul>
</div>
I would like to apply display: none only for the last ul#some-ul inside my #content.
It could be done like so:
#content ul:last-child {
display:none;
}
Note that last-child is only supported in IE9+. As mentioned by #Jop, you should set a class on the last child element to get around this for older versions of IE.
jsFiddle here.
Also, remember that ID's should always be unique.
Completely generic way to do this, that relies on no classes or ID's
div ul:last-of-type li:last-child {
display:none;
}
So basically, the div is the parent item that contains the list items - it could have a class or ID if you want.
Within that, you have your ul tags - the last-of-type does the magic, finding the last ul within the parent div. You then simply use last child on the li.
Here's the fiddle:
http://jsfiddle.net/Kx8SN/
This question already has answers here:
Closed 11 years ago.
Possible Duplicates:
Style parent li on child li:hover.
Is there a CSS parent selector?
I have a nave menu.
On li a:hover the #drop-down-menu appears.
Can I apply a style to the li a while hovering over the drop down menu?
Can you apply a style to the parent element while hovering over the child element?
i.e. I want a border-bottom:2px solid #ffffff; to appear under the li a, while i am hovering over the #drop-down-menu.
Can't figure it out.
If your anchor is - or can be - fullsize (i.e. the size of the list item), then you can use:
li:hover
You would need to use javascript for this. CSS doesn't allow any way to select a parent element.
No. CSS doesn't work that way. You can only go down.
However, if you have your HTML structured properly, you can achieve the effect you're going for.
Assuming the following HTML:
<ul id="main">
<li>A dropdown
<ul class="dropdown">
<li>A submenu</li>
</ul>
</li>
</ul>
You can have the following CSS, and it should work:
#main li:hover a {
border-bottom: 1px solid black;
}
Here's a (very) rough Fiddle.