How to select first Descendant with CSS [duplicate] - html

This question already has answers here:
CSS selector for first element with class
(23 answers)
Select first Descendant with CSS
(5 answers)
Closed 2 years ago.
I have this snippet
<li class="overview">
<a href="...">
<span class="txt">Link 1</span>
</a>
<ul class="sub-menu">
<li class="navBI">
<a href="...">
<span class="txt">Link 2</span>
</a>
</li>
</ul>
</li>
And I want to select only Link 1 but I cannot find the answer.
I tried .overview .txt but it also choose Link 2.
I am not so familiar with the CSS Combinators.
I also tried .overview > a > .txt.
Is there something I miss?

<li class="overview">
<a href="...">
<span id=“text” class="txt">Link 1</span>
</a>
<ul class="sub-menu">
<li class="navBI">
<a href="...">
<span class="txt">Link 2</span>
</a>
</li>
</ul>
</li>
#text {
Stuff: stuff;
}
Could you use an id? Is it being generated in .js?

Related

Target the second and penultimate elements having a specific class with CSS [duplicate]

This question already has answers here:
Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?
(8 answers)
Closed 2 years ago.
I have the following code that display a posts pagination structure. I'm wondering if it's possible to target via CSS the second and penultimate elements having the .page-numbers class. If so, how? I have no control over the markup so I cannot add additional classes to it.
Any help would be appreciated.
<nav class="pagination">
<div class="nav-links">
<a class="prev page-numbers" href="https://page.com/page/1/">Previous</a>
<a class="page-numbers" href="https://page.com/page/1/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="https://page.com/page/3/">3</a>
<a class="page-numbers" href="https://page.com/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="https://page.com/page/10/">10</a>
<a class="next page-numbers" href="https://page.com/page/3/">Next</a>
</div>
</nav>
<style>
.page-numbers:nth-last-child(2),.page-numbers:nth-child(2)
{
background-color:yellow;
}
</style>
<nav class="pagination">
<div class="nav-links">
<a class="prev page-numbers" href="https://page.com/page/1/">Previous</a>
<a class="page-numbers" href="https://page.com/page/1/">1</a>
<span class="page-numbers current">2</span>
<a class="page-numbers" href="https://page.com/page/3/">3</a>
<a class="page-numbers" href="https://page.com/page/4/">4</a>
<span class="page-numbers dots">…</span>
<a class="page-numbers" href="https://page.com/page/10/">10</a>
<a class="next page-numbers" href="https://page.com/page/3/">Next</a>
</div>
</nav>

Target specific element if it contains another element only with CSS [duplicate]

This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Closed 5 years ago.
I have the following HTML setups and I'm trying to target the class="chosen-with-children" with CSS2 or CSS3 only if the div also contains the class="children". Any idea how to solve this? I hope this is possible.
Thanks in advance.
1.
<div class="wcapf-layered-nav">
<ul>
<li class="chosen-with-children">
<a class="" href=""></a>
</li>
</ul>
</div>
2.
<div class="wcapf-layered-nav">
<ul>
<li class="chosen-with-children">
<a class="" href=""></a>
<ul class="children">
<li class="chosen">
<a class="" href=""></a>
</li>
</ul>
</li>
</ul>
</div>
It is not possible using pure CSS, as explained here.
If you wanted to use jQuery you could do this:
$(".chosen-with-children").each(function() {
if($("ul", this).hasClass("children")) {
$(this).addClass("has-child-class");
}
})
.chosen-with-children.has-child-class > a {
color: red;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wcapf-layered-nav">
<ul>
<li class="chosen-with-children">
<a class="" href="">Link 1</a>
<ul class="children">
<li class="chosen">
<a class="" href="">Link 1a</a>
</li>
</ul>
</li>
<li class="chosen-with-children">
<a class="" href="">Link 2</a>
</li>
</ul>
</div>

Tree structure in html [duplicate]

This question already has answers here:
HTML tree full width hover effect
(3 answers)
Closed 6 years ago.
I need to create a tree structure using html and css.
Structure should be like this.
Current css and html for this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
li.active{
background: #B7E9FB!important;
}
<ul>
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.1</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.2</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.3</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.4</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder active">
<a href="javascript:void(0);">
<span>TEST1.5</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.6</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
This structure can have n number of nodes.
Problem:
nested elements width is less than root element width because of left padding (applied padding to display hierarchy), so on hover background color changes only for that particular width.
I want to make width of all li element to 100% of root element so on active background color will change for 100% width of display area, but need to maintain hierarchy.
I would like to have css solution for it.
Thanks in advance.
You can change your CSS like this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
ul li a{
display:block;
}
li.active a{
background: #B7E9FB!important;
}

Put "plus" picture near menu item [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
How to put "plus" picture near menu item ? Here is the link
move the <span class="collapse"> within the <a> tag
then to prevent the link from firing, within the function for collapse simply put
e.preventDefault; or return false;
If you are worried about their distance? look if the elements have width, if yes try to reduce it use display:inline-block, and changing width to min-width.you can wrap the text in a span and add little right margin if needed.
Your elements with class expand and collapse have an absolute positionning with top: 0; right: 0; That means its distance from the top and right edges (from its parent element) are 0 pixels.
What I would personally do in this case (not at all what would be recommended by CSS experts) would be removing the right rule from the class and add an inline style="left: ##px"inside each span.
On my screen, what works best is this combination :
<li class=" level0 nav-2 active level-top m-dropdown menu-style-dropdown parent">
<a href="http://45.55.85.113/products.html" class="level-top">
<span> <span class="category_icon fa fa-tags"></span>SHOP</span>
</a><span class="expand" style="left: 55px"><i class="fa fa-minus-circle"></i></span>
<ul class="level0" style="display: block;">
<li class=" level1 item classic nav-2-1 first parent">
<a href="http://45.55.85.113/products/furniture.html">
<span> <span class="category_icon fa fa-key"></span>Furniture</span>
</a><span class="collapse" style="left: 100px"><i class="fa fa-plus-circle"></i></span>
<ul class="level1">
<li class=" level2 nav-2-1-1 first">
<a href="http://45.55.85.113/products/furniture/patio-furniture.html">
<span>Patio Furniture</span>
</a>
</li>
<li class=" level2 nav-2-1-2">
<a href="http://45.55.85.113/products/furniture/cafe-chairs-and-barstools.html">
<span>Cafe Chairs and Barstools</span>
</a>
</li>
<li class=" level2 nav-2-1-3 last">
<a href="http://45.55.85.113/products/furniture/chairs-seating.html">
<span>Chairs & Seating</span>
</a>
</li>
</ul>
</li>
<li class=" level1 item classic nav-2-2 parent">
<a href="http://45.55.85.113/products/furniture-fixings.html">
<span>Furniture Fixings</span>
</a><span class="collapse" style="left: 135px"><i class="fa fa-plus-circle"></i></span>
<ul class="level1">
<li class=" level2 nav-2-2-4 first">
<a href="http://45.55.85.113/products/furniture-fixings/connectors.html">
<span>Connectors</span>
</a>
</li>
<li class=" level2 nav-2-2-5 last">
<a href="http://45.55.85.113/products/furniture-fixings/insert-nuts.html">
<span>Insert Nuts</span>
</a>
</li>
</ul>
</li>
<li class=" level1 item classic nav-2-3 last">
<a href="http://45.55.85.113/products/electrical.html">
<span>ELECTRICAL</span>
</a>
</li>
</ul>
</li>
or for short :
left: 55px;
left: 100px;
left: 135px;
respectively for Shop, Furniture and Furniture Fixing

navigation using BEM [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm trying to get my head around BEM, and I'm having troubles even with the most basic things. Such as a menu.
Consider this code
<ul class="menu">
<li class="menu__item">
What
</li>
<li class="menu__item">
Why
</li>
<li class="menu__item">
How
</li>
</ul>
ul is the block, li is the element, but what do I do with that anchor? Since I need both li and a styled, li has to be at very least styled to be inline, a has to be block and stuff. I could make the a a .menu_item, but how would I style that li then, since I'm supposed to not to use element selectors in css and since menu block should be appliable to any html element, something like .menu li {} would be, had I decided to use say div and a combo, senseless..
So how do I do this in the "right" bem way?
You have two options here (or you can decide to use both of them):
Use different elements for li and a:
<ul class="menu">
<li class="menu__item">
<a class="menu__link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="menu__link" href="/how">How</a>
</li>
</ul>
Important notice here is that you shouldn't use nested elements like menu__item__link.
Use separate block for links:
<ul class="menu">
<li class="menu__item">
<a class="link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="link" href="/how">How</a>
</li>
</ul>
So you can apply rules with a little bit of cascade: .menu .link {}
Or you can use mixes which is the best way I think:
<ul class="menu">
<li class="menu__item">
<a class="link menu__link" href="/what">What</a>
</li>
<li class="menu__item">
<a class="link menu__link" href="/why">Why</a>
</li>
<li class="menu__item">
<a class="link menu__link" href="/how">How</a>
</li>
</ul>
This time you can avoid using cascade but preserve common styles for links on your project.