My HTML code is as follows:
<div class="c1"> Heading
<div>
<ul style="display:none">
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
This is my CSS :
.c1:hover > div ul
{
display:block;
}
How do I access lower level children with ">" operator? I basically want the list to be displayed on hover of c1.
You need to remove the inline style (style="display:none") from your markup - inline style will override the styles loaded from the stylesheet.
Instead, put this in your stylesheet:
.c1 > div ul {
display:none;
}
.c1:hover > div ul {
display:block;
}
Do this -
Demo
<div class="c1"> Heading
<div>
<ul>
<li>Item1</li>
<li>Item1</li>
</ul>
</div>
</div>
CSS
ul{ display: none; }
.c1:hover div ul
{
display:block;
}
Related
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 months ago.
Let's say our html structure looks like this:
<div class="parent">
<div class="child"></div>
</div>
Now on some button action I add active className to child's div.
My question is:
How to style only parent element if child's div has active className
// CSS pseudo code //
if(child.has.className('active')
.parent{
background: red;
}
You can use the :has() pseudo class selector, although that's only supported in newer browsers. Otherwise you'll probably need to use JS.
.parent {
background: #ccc;
}
.parent:has(.active) {
background: steelblue;
color: #eee;
}
/* Ignore below, for stylistic purposes only */
.parent {
margin: 1rem;
padding: 1rem;
border-radius: .5rem;
font-family: Arial, sans-serif;
}
<div class="parent">
<div class="child">Child</div>
</div>
<div class="parent">
<div class="child active">Child (active)</div>
</div>
For a JS-based solution there are two ways:
Recommended: in the code that adds the active class, you also toggle a class on the parent, say has-active-child and style it accordingly
Not recommended: listen to class changes on the child node using MutationObserver API and style the parent node
At the moment not all browsers support the pseudo class selector :has() as Terry explained. A JavaScript solution goes as following.
Example from GeeksForGeeks
$('ul li:has(ul.child)').addClass('has_child');
.parent > li > ul > li {
background:orange;
}
.parent > li.has_child {
background:red;
}
.parent li {
background:blue;
color:black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<style>
.parent li {
background:blue;
color:black;
}
.parent > li > ul > li {
background:orange
}
.parent > li > ul > li > ul >li {
background:pink;
}
</style>
</head>
<body>
<ul class="parent">
<li>I am first</li>
<li>I am second</li>
<li>I am third</li>
<li>I am forth</li>
<li>I have kids.
<ul class="child">
<li>child1</li>
<li>child2
<ul>
<li>child2.1</li>
<li>child2.2</li>
<li>child2.3</li>
</ul>
</li>
<li>child3</li>
<li>child4</li>
<li>child5</li>
</ul>
</li>
<li>I am sixth</li>
<li>I am seventh</li>
<li>I am eight</li>
</ul>
</body>
</html>
I have this in my html:
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here
</div>
</li>
</ul>
</div>
What I want to do is make the list items inline, while hiding their contents. And the contents would only be visible when I press the list item link. This is what I've tried so far on the css:
li {
display: inline;
}
li div {
display: none;
}
li:target {
display: block;
}
However, this doest not work. The display: block; is not overriding the display: none;
Thanks in advance!
li:target only refers to the li element itself that is targeted. Setting that li’s display property to block will not affect the containing div which display property is set to none. In fact, it will only overwrite the display: inline that’s defined on li.
When you want to display the div that’s inside the targeted li element, then you need to adjust the selector to actually match that div. For example using li:target div to match the specificity of the original rule:
li {
display: inline;
}
li div {
display: none;
}
li:target div {
display: block;
}
<div>
<ul id="tabs">
<li id="h1">
Home
<div>
text here
</div>
</li>
<li id="h2">
Services
<div>
text here 2
</div>
</li>
</ul>
</div>
i want to change other element outside current element level in CSS3. i have tried to use plus symbol but still not working.
<div id="a">
<div id="a_1">
<ul>
<li>test1</li>
<li>test2</li>
</ul>
</div>
</div>
<div id="b">
</div>
i want to change #b background-color i try this but not still work
a ul li:hover #b{
background-color:blue;
}
and also tried this but not working too
a ul li:hover + #b{
background-color:blue;
}
You must use JavaScript or JQuery for that.
Hi I'm looking to set up a centered footer that uses list items with unorganized lists inside of each list item. If I try using float:left I get them to be inline with each other but it is no longer centered. The code i currently have looks like this:
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
display:inline;
}
.mainLI {
display:inline;
}
html:
<div id="box1">
<ul id="mainList">
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li class="mainLI">
<p>Title</p>
<ul class="subList">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
</ul>
</div>
It's beacuse content is centered by text-align within container, that is 100% width of container as default, but less if it's floating.
Anyways i don't understand what you want to achieve? You want to center list item but float it in the same time? Could you precise yourself more?
css:
#charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
#box1 {
margin:0 auto;
background-color:#00FF66;
}
#mainList {
list-style-type:none;
text-align:center;
}
#mainList li, .mainLI p {
display:inline;
}
Example
Your problem with centering lies in the fact that the parent element in which you are centering children must be a block element. See MDN
I have match listings dynamically generated. After each member I display a li that displays VS within it. However the very last ul li in the div match shouldnt be visible. Any ideas how I can do that?
HTML
<style>
.match {
}
.match ul {
}
.match ul li {
float: left;
margin-right: 50px;
}
.match ul li:last-child {
display: none;
}
</style>
<div class="content">
<div class="match">
<ul>
<li>Wade Barrett</li>
<li style="">VS</li>
</ul>
<ul>
<li>Shaemus</li>
<li style="">VS</li>
</ul>
<ul>
<li>Randy Orton</li>
<li style="">VS</li>
</ul>
<ul>
<li>John Cena</li>
<li style="">VS</li>
</ul>
<ul>
<li>Edge</li>
<li style="">VS</li>
</ul>
<ul>
<li>Chris Jericho</li>
<li style="">VS</li>
</ul>
<p class="clear"></p>
</div>
</div>
The :last-child pseudo-class should apply to the ul, not li, because you want VS text of the last ul of the list to be hidden. By applying the pseudo-class to li, you're applying styles to the last li of every ul, which is incorrect.
You should also apply a class attribute to the li elements with the VS text so that it's more convenient to match with a class selector.
Change
<li style="">VS</li>
to
<li class="vs">VS</li>
And use this instead of your current :last-child selector:
.match ul:last-child li.vs {
display: none;
}
What browser are you using, IE does not support it. The latest version of the other browsers do, but I would recommend placing a class on it to make it 100%.