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>
Related
This question already has answers here:
Using .text() to retrieve only text not nested in child tags
(30 answers)
Closed 1 year ago.
I wasn't sure how to set a title for this question.
What I want is to change content inside a DIV with the content of clicked <a> tag. The problem is that inside my <a> tag I have another nested DIV with some text, and I don't want that text to be displayed on change.
How to display only the content of <a> tag on change, without its child div?
Here's my code and link to JSFiddle
$(document).on('click', 'a.dropdown__link', function() {
$('.dropdown__label').text($(this).text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul data-tabs="" role="tablist">
<li role="presentation">
<a data-tabby-default="" href="#seo" class="heading-4 dropdown__link">
SEO
<div class="tabs-card__tab-subtitle">Description 1</div>
</a>
</li>
<li role="presentation">
<a href="#web" class="heading-4 dropdown__link">
Web
<div class="tabs-card__tab-subtitle">Description 2</div>
</a>
</li>
<li role="presentation">
<a href="#marketing" class="heading-4 dropdown__link">
Social
<div class="tabs-card__tab-subtitle">Description 3</div>
</a>
</li>
<li role="presentation">
<a href="#marketingppc" class="heading-4 dropdown__link">
PPC
<div class="tabs-card__tab-subtitle">Description 4</div>
</a>
</li>
</ul>
<div class="dropdown__label">Default text</div>
https://jsfiddle.net/mariokala/zmdjoy9b/28/
Update your click event like so;
$(document).on('click', 'a.dropdown__link', function(){
$('.dropdown__label').text($(this).contents().not($(this).children()).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<ul data-tabs="" role="tablist">
<li role="presentation">
<a data-tabby-default="" href="#seo" class="heading-4 dropdown__link" id="tabby-toggle_think" role="tab" aria-controls="seo" aria-selected="true" tabindex="0">
SEO
<div class="tabs-card__tab-subtitle">Description 1</div>
</a>
</li>
<li role="presentation">
<a href="#web" class="heading-4 dropdown__link" id="tabby-toggle_execute" role="tab" aria-controls="web" aria-selected="false" tabindex="-1">
Web
<div class="tabs-card__tab-subtitle">Description 2</div>
</a>
</li>
<li role="presentation">
<a href="#marketing" class="heading-4 dropdown__link" id="tabby-toggle_manage" role="tab" aria-controls="marketing" aria-selected="false" tabindex="-1">
Social
<div class="tabs-card__tab-subtitle">Description 3</div>
</a>
</li>
<li role="presentation">
<a href="#marketingppc" class="heading-4 dropdown__link" id="tabby-toggle_manage" role="tab" aria-controls="marketingppc" aria-selected="false" tabindex="-1">
PPC
<div class="tabs-card__tab-subtitle">Description 4</div>
</a>
</li>
</ul>
<div class="dropdown__label">Default text</div>
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?
I'm trying to create spaced tabs. I want about 6-8 of them running across the width of the screen, each with equal distance apart from each other. I also need them to have dropdown ability on hover.
Initially I went with Bootstrap 3 for quick and fast tabs. However, I can't seem to get them to space equally across the width of the page.
Alternatively, I found this awesome snippet of code which is pure css. However, I'm far from a css wizard and making a pure dropdown like the tabs would take me a long time.
Anyone know a solution to the bootstrap 3 problem of spacing or know where I can get a pure css dropdown solution? Bootstrap 3 code below, pure css in jsfiddle link
Thanks!
Code:
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a></li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a></li>
</ul>
</li>
</ul>
You can enclose your code inside a div with container-fluid class. It will help you to utilize entire width of apge.
ul.nav-tabs > li {
width: 33%;
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<ul class='nav nav-tabs'>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 1</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 1</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 2</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 2</a>
</li>
</ul>
</li>
<li class='dropdown'>
<a class='dropdown-toggle' data-toggle='dropdown' href='#'>Test 3</a>
<ul class='dropdown-menu'>
<li><a href='#'>test 3</a>
</li>
</ul>
</li>
</ul>
</div>
I am working on making a collapsible element
I want to access
<div id="class1">
<ul>
<li> <a href="#" >link 1</a></li>
<li> <a href="#" >link 2</a></li>
<ul class="submenu">
<li> <a href="#" >link 1-1</a></li>
<li> <a href="#" >link 1-2</a></li>
</ul>
</ul>
I want to change the color of linki 1-1 when the link 2 is active or hide it when the link 2 is inactive.
Hope I am being clear here.
Just created a rough mockup for achieving the desired result. Please note there are many ways of achieving and this is only a way
$("#drop").click(function() {
$(".item").toggle("active")
})
.active {
display: block;
}
.item {
display: none
}
.item a {
text-decoration:none;
color:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="class1">
<ul>
<li> link 1
</li>
<li> link 2
<ul class="submenu">
<li class="item"> link 1-1
</li>
<li> link 1-2
</li>
</ul>
</li>
</ul>
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.