i have a list
<ul>
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
</ul>
Now i want to select the last li with the class "range1". Problem is, that this list is dynamic cause of a sql database output, so i cant work with nth-child.
li.range1:last-child
doesnt work. I dont want use Javascript so is it possible to just use CSS?
You cannot apply last-of-type or last-child to a CSS class.
You can either us Javascript or change your HTML a little bit (preferable solution):
<ul class="range">
<li class="range1">Entry</li>
<li class="range1">Entry</li>
<li class="range1 range__last">Entry</li>
<li class="range2">Entry</li>
<li class="range2">Entry</li>
<li class="range2 range__last">Entry</li>
</ul>
last-child works only for the last element of its parent irrespective of the class name differentiation that you specify.
alternatively li.range1:nth-child(3) can be used. otherwise it should have separate container classes for both the lists that u specify
Related
I am trying to put the BEM naming convention in action but having some confusions about naming the HTML elements. I really want to understand do I really need to provide the class name for each HTML element.
Let's say I have the following code and for example:
<ul class="nav">
<li class="nav__list"><a href="#" class="nav__link>Home</a></li>
<li class="nav__list"><a href="#" class="nav__link>Services</a></li>
</ul>
I don't want to apply CSS to the <li> elements.
So, in that case, do I need to use the element name for the <li> tag. i.e. <li class="nav__list">...</li> ?
Can I just use the element name for the anchor tag without giving element name nav__list to the <li> element?
Here is what I am thinking to do because I don't want to apply styles to the CSS to <li>:
<ul class="nav">
<li><a href="#" class="nav__link>Home</a></li>
<li><a href="#" class="nav__link>Services</a></li>
</ul>
first of all, you should have to follow BEM most of the developer followers BEM only because BEM is good at the naming convention and it's shows the standard naming convention for coding. it depends on you if you want to use BEM you can use or else it's your wish but I suggest you follow BEM it's good in standard.
you can use this
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
as well as this one
<ul class="nav">
<li></li>
<li></li>
</ul>
now you don't want to give style to li but in future client say you to give style to li that time what you will do again you will change the code so you have to use this below HTML code
<ul class="nav">
<li class="nav__list"></li>
<li class="nav__list"></li>
</ul>
I want to write the following ul list.
<ul>
<li class="home">home</li>
<li class="intro">intro</li>
<li class="other">other</li>
<li class="contact">contact</li>
</ul>
1.To write four lines.
home
intro
other
contact
2.To press v into visual mode ,and select all the four lines.
3.To ctrly,
4.To input ul>li[class=""]*
<ul>
<li class="">home</li>
<li class="">intro</li>
<li class="">other</li>
<li class="">contact</li>
</ul>
At last to input home intro other contact into class="" one by one.
Is there more quick way write class name in ul with emmet?
Can you try this?
ul>li.home+li.intro+li.other+li.contact
Since you have custom class names which doesn't have a numerical pattern, you have to enter the class names manually.
If you need to be quicker, you can use the implicit tag names from Emmet.
ul>.home+.intro+.other+.contact
Available in cheat sheet https://docs.emmet.io/cheat-sheet/
I'm putting together a WP website, and on the menu bar the active menu item is underlined. All of the menu items (li) had a padding-right set on them, but I need to take it off the active element so that the border on the bottom only extends to the end of the text. To make up for it, I need to somehow target the next li but I can't quite figure out how to do it. I'm working in the context of someone else's WP theme which is always a challenge but I think this is probably doable, I just don't know quite how to combine the CSS selectors. Here's the basic menu structure:
<nav id="top-menu">
<ul id="menu-top">
<li id="menu-item">
<a>ITEM 1</a>
</li>
<li id="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li id="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
To target the padding on the element, I have to use #top-menu ul > li#current-menu-item > a
So if I wanted to target the 3rd element in this example, what code would I use? Is this even possible, or am I trying to be too specific? I'm hoping some combination of child and descendant selectors, but I'm not sure how I can make it all work together. Thanks for your help!
Usually in situations like this I resort to a bit of jQuery. With jQuery, you can use next() to get the li after the one you've targeted.
First, you've mixed up ids and classes. You need to be using classes here (ids cannot be repeated):
<nav id="top-menu">
<ul id="menu-top">
<li class="menu-item">
<a>ITEM 1</a>
</li>
<li class="menu-item current-menu-item">
<a>ITEM 2</a>
</li>
<li class="menu-item">
<a>ITEM 3</a>
</li>
</ul>
</nav>
Then this would give you the li after the current one:
$('.current-menu-item').next()
So you could do something like add another class to it (obviously my class name is waaaayyy longer than it really needs to be!):
$('.current-menu-item').next().addClass('the-one-after-the-current-menu-item');
Which you could then style via css.
.the-one-after-the-current-menu-item { // styling here.... }
Yes, the "+" in CSS selects the element after whatever. In this case, something like this:
#current-menu-item + li {
background: red;
}
Although, you may have another problem in that you can't use spaces in IDs. If the IDs in your example were classes instead, you'd be completely fine.
as pointed out by russtuck91, that current-menu-item needs to be a class, then his answer is the one i would implement, it is the cleanest.
however if you cant change that (which you have to as you cant have spaces in id's), you can use :nth-child(x) where x is the number of child elements down:
#top-menu li:nth-child(3) a {
color:red;
}
will still recommend russtuck91's answer though
I need to divide into groups several <li> elements in a list, is it possible?
(I know I an give each element different class names/separate into different <ul>)
Have you considered nested UL's? I believe this would validate:
<UL>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
<LI>
<UL>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
<LI></LI>
</UL>
</LI>
</UL>
Your CSS trick was my first guess; too bad you can't use that.
According to the XHTML schema (or one the schema anyway), the only thing you put inside a <ul> is a <li>, as described at http://www.w3.org/TR/2006/WD-xhtml-modularization-20060705/abstract_modules.html#s_listmodule
You might tweak the appearance of the list items using CSS, by assigning different class values to the <li> elements.
<li class="group1"> ...
<li class="group1"> ...
<li class="group1"> ...
<li class="group2"> ...
<li class="group2"> ...
<li class="group2"> ...
Have you considered using multiple-inheritance of CSS classes? This can be a bit messy to maintain, but it will solve the case of the same entry in multiple groups. The HTML looks something like this:
<ul class="pizza-toppings">
<li class="meat">pepperoni</li>
<li class="meat">bacon</li>
<li class="vegetarian">cheese</li>
<li class="vegetarian vegan">mushrooms</li>
<li class="vegetarian vegan">onions</li>
</ul>
Here we have three groups (meat, vegetarian and vegan) and some toppings, like mushrooms and onions, are part of more that one group.
I believe your only options are the ones you've already identified, multiple lists or via classes, since for an li to be in the list defined by a ul or an ol, it must be the immediate child of that ul/ol (reference).
If you need to separate into different groups items from one unordered list than they should belong to different lists isn't it OR should be grouped in an ordered list (many ULs in one OL).
If this is for presentation needs (to display one list on many columns) and you can solve a few constraints, the second technique in https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5810687.html or explained also here : http://www.communitymx.com/content/article.cfm?page=2&cid=27F87
Such groups exist for select (optgroup) but obviously you can't separate the option elements because you must select only one of them so they should belong to the same element.
I need to markup a ladder for upcoming tournaments, and I can't find any way to mark it up semantically. The only way I've seen so far is to mark it up as a table, and I'd like to avoid that at all costs.
Any ideas?
I've found one example at Accessible NCAA Tournament Bracket which uses a mix of ul/li to achieve it. It's far from perfect (it could uses li + li instead of the "top/bottom" classes, but it's a start.
I'd do it like this, although would also maybe add title attributes to the list items also in order to make the horizontal relationship more accessible
eg <li class="gameThree" title="winner of round One game 2 vs winner of round one game 5">
<ol id="tournamentLadder">
<li id="roundOne">
<ul class="matches">
<li class="gameOne>
<ol class="teams">
<li class="home">Teamname1</li>
<li class="visitors">Teamname2</li>
</ol>
</li>
</ul>
</li>
<li id="roundTwo">
</li>
<li id=final">
</li>
</ol>