Would the following CSS selectors select the same elements?
ul > li[class="a"] { }
vs
ul > li.a
Would the following CSS selectors select the same elements?
No they don't. Notice how in the below example the last element isn't selected by ul>li[class="a"] because that selector will select element having only a as a class.
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
</ul>
Even whitespace count:
ul>li.a {
color: red;
}
ul>li[class="a"] {
font-size: 30px;;
}
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a b">Item 3</li>
<li class="a ">Item 3</li>
</ul>
Both selectors work the same:
#one ul>li.a {
color: red;
}
#two ul>li[class="a"] {
color: orange;
}
<div id="one">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
<div id="two">
<ul>
<li class="a">Item 1</li>
<li>Item 2</li>
<li class="a">Item 3</li>
</ul>
</div>
Related
This solution isn't going to work since I have no control over adding a class/id to the ul element: Get first level li from ul
Given that the parent ul has no id/class, can css be written to target only the first level li? If not, how could it be done?
This is the html:
<ul>
<li id="acomment-62" class=" comment-item" data-bp-activity-comment-id="62">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-65" class=" comment-item" data-bp-activity-comment-id="65">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-63" class=" comment-item" data-bp-activity-comment-id="63">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-66" class=" comment-item" data-bp-activity-comment-id="66">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
<li id="acomment-64" class=" comment-item" data-bp-activity-comment-id="64">
<div class="bb-activity-more-options-wrap action"></div>
<ul>
<li id="acomment-67" class=" comment-item" data-bp-activity-comment-id="67">
<div class="bb-activity-more-options-wrap action"></div>
<div class="acomment-meta"></div>
<div class="acomment-content"></div>
</li>
</ul>
</li>
You can do that with CSS alone. There's a few ways you can do it. Here is one of them and a working codepen so you can mess around with it yourself.
HTML
<ul>
<li>Item 1</li>
<li>Item with list 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item with list 2
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
<li>Sub List
<ul>
<li>Sub list item 1</li>
<li>Sub list item 2</li>
<li>Sub list item 3</li>
</ul>
</li>
</ul>
</li>
<li>Item 5</li>
CSS
li {
color: red;
}
li li {
color: initial;
}
I'm not sure how supported this is but you could apply the style to all li and then override that style to target any descendant li
EG.
li li {
color: initial;
}
li {
color: red;
}
<ul>
<li>A</li>
<li>B</li>
<li>
C
<ul>
<li>C1</li>
<li>C2</li>
<li>C3</li>
</ul>
</li>
<li>D</li>
<li>E</li>
</ul>
This question already has an answer here:
Select :last-child with especific class name (with only css)
(1 answer)
Closed 2 years ago.
Would like to access item 6 only through css
<div class="div-class">
<li class="li-class">Item 1</li>
<li class="li-class">Item 2</li>
<li class="li-class">Item 3</li>
</div>
<div class="div-class">
<li class="li-class">Item 4</li>
<li class="li-class">Item 5</li>
<li class="li-class">Item 6</li>
</div>
EDIT
I think that it is duplicate. Select :last-child with especific class name (with only css)
So you need which div you want to point. In this case, this is second div so we specified:
div:nth-child(2)
And then we just select last li as below:
li:last-child
So finaly we got:
div:nth-child(2) li:last-child{
background-color: red;
}
EDIT
With jQuery:
$('li').last().css('background', 'red');
Just to let you know, your html structure is incorrect as you should set li right after ul or ol
$('li').last().css('background', 'red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</div>
<div>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</div>
I am trying to use first-of-type to style only the first .menu element in this layout...
.menu:first-of-type
{
background:red;
}
<div id="container">
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section>
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
</div>
</div>
It is applying the background color to all, where am I going wrong?
This is because :first-of-type makes the rule apply to every element that is first of the type within its parent element. You need to capture the first section element and then style the menu element like so:
section:first-of-type .menu
{
background:red;
}
:first-of-type targets first child of specific type. As these elements have different parents, the all are first childs. You can prevent this by adding class to <section> and using it for that:
.menuSection:first-of-type {
background: red;
}
<div id="container">
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
<section class="menuSection">
<div>
<ul class="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</section>
</div>
Here is my code as simple as possible for convenience.
#hidden {
display: none;
}
#visible:hover + #hidden {
display: block;
}
<html>
<head>
</head>
<body>
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
</body>
</html>
So I have tried to follow this code example from this webiste and do the same with my code, but it didn't worked.
Could you explain to me why? And show me the correct way ?
Because element with id #hidden is child and not sibling of the element with id #visible. You can use Descendant selector:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
References
Adjacent sibling selectors
It doesn't work because you are using the adjacent sibling selector (+). #hidden is a descendent of #visible so no intermediary selector is required:
#hidden {
display: none;
}
#visible:hover #hidden {
display: block;
}
<ul>
<li id="visible">
Names
<ul id="hidden">
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</li>
</ul>
Your current selector would work for a similar structure to the following, which is obviously invalid:
<ul>
<li id="visible">
Names
</li>
<ul id="hidden"> /* #hidden is now a sibling of #visible */
<li>name 1</li>
<li>name 2</li>
<li>name 3</li>
<li>name 4</li>
</ul>
</ul>
I added a horizational menu in a header of WordPress within a <nav id="hoz-menu"> I have no idea which CSS statement make the menu exceed the block. It is supposed the CSS of the menu is responsive.
Demo can be found from http://jsfiddle.net/yckelvin/nqx2a1ao/
Here is the screen capture of the Chrome debug http://screencloud.net/v/Ernf
Below is HTML code of the menu
<nav id="hoz-menu">
<ul id="hoz-menu" class="topmenu">
<li class="topfirst"><span>Item 1</span>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul></li>
<li class="topmenu"><span>Item 2</span>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
<li>Item 2.4</li>
<li>Item 2.5</li>
</ul></li>
<li class="topmenu">Item 3</li>
<li class="topmenu">Item 4</li>
<li class="topmenu">Item 5</li>
<li class="topmenu">Item 6</li>
<li class="toplast">Item 7</li>
</ul>
</nav>
the width of <nav id="hoz-menu"> is 420px and CSS is
{
display: block;
}
CSS of <ul id="hoz-menu" class="topmenu">
#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}