I am working on this demo. How can I apply different style to my nested list (>Nested 1. and >Nested 2) rather than its parent list?
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul>
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
You can use li li a to select those elements. For example:
li li a {
color:red;
}
jsFiddle example
I would achieve this through classes added to the <ul> elements, then use the appropriate css selector to apply the style.
Add the class to the <ul> tag you want to style.
<div>
<ul>
<li>Zurich</li>
<li>Geneva
<ul class="styledList">
<li>Nested 1</li>
<li>Nested 2</li>
</ul>
</li>
<li>Winterthur</li>
<li>Lausanne</li>
<li>Lucerne</li>
</ul>
</div>
Then, in the css sheet, apply styling to that class name, or just to the <li> elements within that list, whatever is appropriate.
Apply to <ul> and all decendants
.styledList {
// css style
}
Apply only to <li> inside the <ul>
.styledList li {
// css style
}
The . in the selector is used to specify that the style is applied to the elements with that class, or you can use the # selector to specify an ID that you want the style applied to, such as
<div id="styledDiv">Hello</div>
css
#styledDiv {
border: 1px solid black;
}
If you want to learn more about CSS selectors, you can check out the W3 article
http://www.w3.org/TR/CSS2/selector.html
and here is the class selectors in particular
http://www.w3.org/TR/CSS2/selector.html#class-html
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
I have an html like this
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
How can I target only the last and first 3 child? In my html I want only 1.1, 1.2, 1.3, 1.6, 1.7 and 1.8 will be target.
This is what I tried but it target also the li inside of ul's children ul
First, you need a way to identify the ul you are interested in. You can add a class or id to the outermost ul so that your selectors don't target other ul's. (If editing the HTML is not an option, you can use the parent element in your selector, and select only direct descendant ul's.)
Next, use the right selectors, to get the first and last 3 children.
To select first 3 children:
ul.top > li:nth-child(-n+3)
To select last 3 children:
ul.top > li:nth-last-child(-n+3)
See it here.
I had to target everything but the last and first 3 children.
ul>*:not(:nth-child(-n+3)):not(:nth-last-child(-n+3)) {
background-color: orange;
}
<ul>
<li>1.1</li>
<li>1.2</li>
<li>1.3</li>
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
<ul>
<li>2.4</li>
<li>2.5</li>
<li>2.6</li>
</ul>
<li>1.4</li>
<li>1.5</li>
<ul>
<li>2.7</li>
<li>2.8</li>
<li>2.9</li>
</ul>
<li>1.6</li>
<li>1.7</li>
<li>1.8</li>
</ul>
I have three <li> tags in an <ul id="accordion">. I now want to select the various items via jQuery.
To select the first <li> item, we can use $("#accordion li:first").
To select the last <li> item, $("#accordion li:last") works
How can I select the middle <li> element through a jQuery selector? There is no :middle pseudo-class that I could use here.
You can combine two ":not" selectors so that you get all of the 'not first, and not last' elements like so:
HTML
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
Javascript
$('li:not(:first-child):not(:last-child)').css('color', 'red');
Also, check the JsFiddle
There is no :middle selector, and this makes sense – what element would get matched when we have 4 items?
However, you can access elements by their index. Using CSS Level 3 selectors, you can use the :nth-child(…) pseudo-class:
#accordion li:nth-child(2)
The :nth-child pseudoclass can also select repeating patterns of elements, such as all even or odd childs.
jQuery additionally offers the nonstandard :eq(…) pseudoclass for indexing, which you should probably use in this case:
$("#accordion li:eq(1)") // zero-based indexing
Further reading:
:nth-child CSS documentation on MDN
:nth-child jQuery documentation
:eq jQuery documentation
In this mode you can count number of elements.
for example you have this :
<ul id="someId">
<li>t1</li>
<li>t2</li>
<li>t1</li>
</ul>
the you can use length to count lis
var ln =$("#someId li").length;
after that find middle of length by this code
ln = ln / 2;
then use eq function of jquery to select middle Item like this
$("#someId li:eq("+ln+")").css("border","1px solid red");
But don't forget indexing by using eq starts from 0 .
I hope my answer help you :)
Another way to select second element is to use adjacent sibling selector +:
$("#accordion li:first + li")
Here is a demo.
$("#accordion li:first + li").addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
And here is also generic solution for arbitrary number of li elements (not only 3):
$('#accordion li ~ li:not(:last)').addClass('selected');
.selected {color: red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="accordion">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
Whats wrong with my code below.my code below doesn't work fine
<ul>
<li><font-color ="Red"/> Text 1</li>
</ul>
Font-color isn't a valid HTML tag or style declaration. Syntactically, it's illegal.
Instead, it should be something like: <li style="color:red">foo</li>
However, it is almost always better to move styles into their own stylesheet, and use a class name instead:
HTML
<li class="my-class">foo</li>
CSS
.my-class { color: red; }
As #JanDvorak noted, try to use descriptive names for classes like "highlight".
You can also use other selectors to style your elements, such as an ID selector:
HTML
<li id="item1">foo</li>
CSS
#item1 { color: red; }
It should be:
<ul>
<li style="color: Red;"> Text1</li>
</ul>
Font is not a self closing tag. Also it's deprecated so you should look at changing that if possible. It should look like this:
<ul>
<li style='color:red'> Text 1</li>
</ul>