I have a bunch of incremented elements
<ul>
<li id="idTab1">
<li id="idTab2">
<li id="multiTab1">
<li id="multiTab2">
<li id="multiTab3">
<li id="idTab3">
</ul>
Is there some CSS selector method for me to select all 'multiTab' elements? something like 'li #multiTab*' ? :P
You can use ^=, example:
li[id^="mulitiTab"]
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
This question already has answers here:
CSS selector for first element with class
(23 answers)
Closed 3 years ago.
I would like to apply styling to list items in ordered list (specifically to the ::after or ::before), based on the classes of the <li>. The code for these lists looks like the following:
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
The lists are generated automatically, and the position of the first class2 item may vary inside the list (it can even be absent in some case, leaving only class1 items in the list).
I would like to add something in the ::before of the first item of each class (like a specific header for each type of item in my list). Ending up with something like this:
Example of expected result
Anyone could help me with the CSS selector to use for this? I tried several things with + or ~ but nothing works seems for now...
Thanks!
David
There is no :first-of-class selector available, but you can use the general sibling combinator to remove the pseudo element for all elements with the same class, that are following the first one:
.class1::before { content:"some header for class 1"; display:block; }
.class2::before { content:"some header for class 2"; display:block; }
.class1 ~ .class1::before, .class2 ~ .class2::before { content: none; }
<ol>
<li class="class1">Item 1</li>
<li class="class1">Item 2</li>
<li class="class1">Item 3</li>
<li class="class2">Item 4</li>
<li class="class2">Item 5</li>
</ol>
You can use a section tag to define a header for your list.
<section>
<h3>Reference Document</h3>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ol>
This question already has an answer here:
Does :not() negation accept descendant selectors? [duplicate]
(1 answer)
Closed 5 years ago.
would anyone be so kind to tell me what's wrong with the following CSS selector?
:not(ul[class="nav navbar-nav"] li) > a
I'm trying to select all anchor elements whose parent is not ul[class="nav navbar-nav"] li Thx in advanced :)
I'm trying to set a CSS property for all anchors except the following ones:
<ul class="nav navbar-nav">
<li class="active">
Hi
</li>
<li>
Hello
</li>
<li>
Bye
</li>
</ul>
Edit: The right selector using jQuery would be jQuery(':not(ul[class="nav navbar-nav"] li) > a')
You're better off styling the general first, and then overriding with the specific. Would this suffice:
a {color: red}
ul.nav.navbar-nav > li > a {
color:blue;
}
<ul class="nav navbar-nav">
<li class="active">
Hi
</li>
<li>
Hello
</li>
<li>
Bye
</li>
</ul>
Default Link Style
I have an html menu listing that look like this:
<ul id="navlist" class="clearfix">
<li class="home"></li>
<li class="xo">About Us</li>
<li class="xoxo">People</li>
<li class="xoxoxo">Business</li>
<li class="xo">News</li>
<li class="xoxo">Careers</li>
<li class="xoxoxo">Gallery</li>
<li class="xi">Contact Us</li>
</ul>
My challenge is ensuring the CMSListMenu apply the different classes to each li.
The li could styled each by using Edit > Document Properties > Navigation tab provided in portal engine.
It exposed the css styling of each page li. You can set the link, mouseover and current page classes.
I have the following code:
<ul id="myList">
<li class="li1">Example 1</li>
<li class="li2">Example 2</li>
<li class="li3">Example 3</li>
<li class="li4">Example 4</li>
</ul>
Is there any way i can transform the list to:
<ul class="myList">
<li class="li1"><div class="container">Example 1</div></li>
<li class="li2"><div class="container">Example 2</div></li>
<li class="li3"><div class="container">Example 3</div></li>
<li class="li4"><div class="container">xample 4</div></li>
</ul>
using css only.
without using javascript
CSS cannot add elements, that really isn't its purpose.
That being said, you can achieve a similar effect by making the items display: block, like this:
#myList > li { display: block; }
No. CSS is designed to instruct the browser on how elements look and are positioned. It isn't capable of editing the live HTML.