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/
Related
What extension does this in visual studio code
ul.menu > li.item*3 > a.link#www.code.com > Click Me
it will exchange it with
<ul class="menu">
<li class="item"><a class="link" a="www.code.com">Click Me</a></li>
<li class="item"><a class="link" a="www.code.com">Click Me</a></li>
<li class="item"><a class="link" a="www.code.com">Click Me</a></li>
</ul>
You have a couple of issues.
Remove the spaces, emmet won't work "across" spaces.
You have a="www.code.com" I assume you mean id="www.code.com", but that is problematic because of the .'s which emmet will interpret as more classes in this: a.link#www.code.com. That can be fixed with the custom attribute syntax [attributeName="attributeValue"]. See https://docs.emmet.io/abbreviations/syntax/#custom-attributes
Your final text has a space too so wrap it in {}
So you will have to do:
ul.menu>li.item*3>a.link[id="www.code.com"]{Click Me}
which expands to:
<ul class="menu">
<li class="item">Click Me</li>
<li class="item">Click Me</li>
<li class="item">Click Me</li>
</ul>
If you really mean a="www.code.com" as an attribute then make that a custom attribute as in ul.menu>li.item*3>a.link[a="www.code.com"]{Click Me}
Finally, emmet is expecting a href attribute and value since it is an a tag. If you don't want one, let us know - you might be able to eliminate that with a custom emmet snippet.
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 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
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>