I have the following list;
* unordered item 1
* unordered item 2
* unordered item 3
How would I use wrap with abbreviation (ctrl+shift+G) or (ctrl+shift+A) and remove the
* unordered and be left with just the item and number. I am using Sublime Text 3 on Linux
and I select the text above then ctrl+shift+G Then I want to create an unordered list nav bar.
So in the wrap with abbreviation window I type nav>ul.nav>li.nav-items$*>a|t and the result of
this is;
<nav>
<ul class="nav">
<li class="nav-item1">unordered item 1</li>
<li class="nav-item2">unordered item 2</li>
<li class="nav-item3">unordered item 3</li>
</ul>
</nav>
I removed the * but not the unordered. I know the |t is the Emmet trim filter. Is there a
way to pass this filter a number value to tell it how many items or words to trim?
What I want to be left with after applying |t (the trim filter) is;
<nav>
<ul class="nav">
<li class="nav-item1">item 1</li>
<li class="nav-item2">item 2</li>
<li class="nav-item3">item 3</li>
</ul>
</nav>
Emmet removes only well-known list markers like numbers or bullets. It’s much better and easier to remove something else using native editor features like column selection
Related
How we add short description in the form of bullet points below the product title.
like this...in this photo bullet points are below the title
Simply add an unordered list to the product record, in the product description textarea.
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
If you're using default Cornerstone (6.6.1 at the time of this comment), you will need to:
Set theme_settings.show_product_details_tabs to false.
Move {{> components/products/description}} into the correct spot in templates/components/products/product-view.html.
Using sublime text 3 cutting and then paste and indent using Ctrl+Shift+V it doesn't do what I think it should do:
<div>
<div></div>
</div>
function(){
test;
}
The expected result should be:
<div>
<div></div>
</div>
function(){
test;
}
Am I missing something?
This is not how Paste and Indent works. It is intended for situations when you copy a line or lines with one indentation and paste it into a block with a different indentation. For example:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
| <li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Four</li>
</ul>
Now, I want to copy the line where the cursor is (containing <li>Three</li>) from innerList to list1. If I just do copy and paste (CtrlV), the indentation is wrong:
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
However, if I do "paste and indent" (CtrlShiftV):
<ul class="list1">
<li>One</li>
<li>
<ul class="innerList">
<li>OneA</li>
<li>OneB</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
| <li>Three</li>
<li>Four</li>
</ul>
The indentation is corrected for the current context. To do what you want to do, you'd need to use one of the many HTML and/or JS formatting plugins available on Package Control. I personally use HTML-CSS-JS Prettify, which runs on top of Node.js, but there are plenty to choose from.
as i remember there is Beautiful Html extension well be useful for your issue
I just got into Scrapy & I’m aware this is a Noob question but How do I add an attribute to specify specific pagination link?
here is the html with the element I’m targeting.
`<div class="pagination">
<a rel="prev" href="/collections/all?page=1" class="fa fa-chevron-left prev pagination-icon"></a>
<ul>
<li class="pagination-icon">
1
</li>
<li class="pagination-icon pagination-icon--current">
2
</li>
<li class="pagination-icon">
3
</li>
<li class="pagination-icon">
4
</li>
<li class="pagination-icon pagination-icon--current">
…
</li>
<li class="pagination-icon">
50
</li>
</ul>
I Need to follow the link in this line
<a rel="next" href="/collections/all?page=3" class="fa fa-chevron-right next pagination-icon"></a>
Here is my scrapy code
next_page = response.css('div.pagination a::attr(href)').extract_first()
if next_page is not None:
yield response.follow(next_page, callback=self.parse)
What’s happening is its following this link instead of the other one because it is the first one in the class “pagination”
<a rel="prev" href="/collections/all?page=1" class="fa fa-chevron-left prev pagination-icon"></a>
I can see 2 differences between the attributes of the 2 links, both in the class “pagination”
Rel attribute is different, I need the one with “next”
Class attribute is different, I need “fa fa-chevron-right next pagination-icon”
I’m pretty sure I can get the correct link by specifying one of the 2 attributes listed above in my css selector. I tried using the following CSS selectors but none worked.
div.pagination a.fa fa-chevron-right next pagination-icon a::attr(href) does not work
a.fa fa-chevron-right next pagination-icon a::attr(href) does not work
a.fa fa-chevron-right next pagination-icon::attr(href) does not work
How can I achieve my goal? Why do none of the CSS selectors I tried work?
You can't select multiple classes with a single dot. Either combine each of them with dots or go for this syntax "[class='fa fa-chevron-right next pagination-icon']". However, if any class out of them is generated dynamically then the selector will break.
Then try with this to see what happens.
response.css('div.pagination a[rel="next"]::attr(href)').extract_first()
So I've stupidly designed a list of recent articles, all is good with the world BUT the first 2 entries html are markedly different then the remainder of entries.
I am yet to turn a line of code so any advice anyone an offer is greatly appreciated.
Simplistically the ul would look like:
<li class="1of2"> /* It's number 1 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li class="1of2"> /* It's number 2 – give it a class to identify it as special */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
<li> /* It's not number 1 or 2 – ie. every other item, NO class per se */
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
If you imagine a 3 column grid for all entries but the first 2 entries are 1.5 columns each. Bit of a noodle scratch going on here, any thoughts gratefully voted upon.
PS. I will be using Stash if that helps !
Just output the class name based on the value of {count}. I've output the whole opening <li> tag here to keep it simple but you could just output the class attribute or class name itself.
{if count<=2}
<li class="special">
{if:else}
<li>
{/if}
<h1>{title}</h1>
... etc.
</li>
Incidentally, I don't think you can have class names that begin with a number.
Here's how I would do it if you want each of the first 2 to have a unique class name:
<li{if count<=2}class="top{count}"{/if}>
that will output
<li class="top1">...
<li class="top2">...
<li>...
If you want the first 2 items to have the same class:
<li{if count<=2}class="whateveryouwant"{/if}>
which will output
<li class="whateveryouwant">...
<li class="whateveryouwant">...
<li>...
Couldn't you do {if count == "1|2"}class="whatever"{/if} ?
Seems you are asking for two unique classes, one for the first entry and one for the second entry. In that case, this will work:
{if count == 1}
<li class="first">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else if count == "2"}
<li class="second">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{if:else}
<li>
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
{/if}
Also, class names that start with a number will not validate.
You could do it with simple conditionals as well if there is no "other" class that would then require the if:else part of the conditional:
<li{if count == "1"} class="first"{/if}{if count == "2"} class="second"{/if}">
<h1>{title}</h1>
<p>{short_desc}</p>
</li>
This assumes you don't have any other differences, such as different custom fields in one option versus the other, which MediaGirl's suggestion would handle more elegantly. If the only difference between them is class assignment, this is another alternative.
<ul>
<li class="selected cell">test</li>
<li class="cell">test2</li>
</ul>
How can I select only the .selected .cell element?
Y.one('.selected, .cell') <= This selects boths li elements. and I just want to select the first element.
Is there something like?
Y.one('.cell').one('.selected') ???
.selected.cell
Notice the lack of space between them.