I'm looking for a way to add a :content pseudo-element to an empty element and ran into the :empty CSS pseudo-selector which looks like it would serve the purpose I'm looking for. Basically, I want to add a generic message like "Nothing found" :after an empty element like a list.
For whatever reason my attempts to style empty elements aren't working, here's an example:
https://codepen.io/kylegill/pen/ZVLEBg
This is the Markup/HTML:
<ul class="list">
</ul>
<!-- ^ Not getting selected by :empty:after -->
<ul class="list">
<li>This list is not empty.</li>
</ul>
And the CSS:
.list:empty:after {
content: "Nothing found";
}
I found this article that helped answer my question.
The :empty class has some weird behavior and won't select elements with a space or a return/line break in them.
Ex: <div> </div> won't be selected, but <div></div> will.
The CSS4 spec includes :blank in this use case, which will select elements with whitespace, where :empty will not.
Here's an updated example:
https://codepen.io/kylegill/pen/vvgYZe
Related
Using: AngularJS v1.3.15
Disclaimer: I know virtually nothing about angularjs. But I'm "forced" to use it because its being used in a framework that I am using.
I want to modify some html/angularjs that looks like this:
<ul>
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button" href="{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
I can see what is going on here... ng-repeat causes an iteration on the elements of the model.externalProviders collection/array. It works fine, but I have no control over content/styling individual <a> elements depending on the provider. I would like to change the content/appearance of the <a> element depending on type.
The relevant part of the model looks like this:
"externalProviders": [
{
"type": "Google",
"text": "Sign-in with Google",
"href": "https://localhost:44302/external?provider=Google&signin=04e029cf1018403f1757b097fbfb1ecb"
}
],
So I thought maybe there is a way to "select" or "pick" from externalProviders by type... If that type exists, then render the appropriate markup, e.g.:
<ul>
<!-- if model.externalProviders has item with type=="Google"... -->
<li>
<a class="pure-button button.google" href="<i class="fab fa-google"></i>{{provider.href}}">{{provider.text}}</a>
</li>
<!-- if model.externalProviders has item with type=="Facebook"... -->
<li>
<a class="pure-button button.facebook" href="<i class="fab fa-facebook"></i>{{provider.href}}">{{provider.text}}</a>
</li>
</ul>
Not sure what the proper search terms would be so I had trouble finding any info that might solve my problem. Is something like this possible with AngularJS? If so, how would I accomplish it?
As #Major Sam commented, the ngClass might work for less simple scenarios, but I don't even need to go that far. Luckily I have control over the type property and the css, so I can make my type and css selector match the font awesome icon class selector for the icon. This works:
<li ng-repeat="provider in model.externalProviders">
<a class="pure-button button-{{provider.type}}" href="{{provider.href}}"><i class="fab fa-{{provider.type}}"></i>{{provider.text}}</a>
</li>
Drawbacks: Doesn't allow you to change the actual markup (like, e.g., not include the icon if font awesome didn't have one for that provider).
After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')
Currently i need to search a text and select the expected result from the search list.Search result displays with li tag and the text resides under span tag. Searching text will be like this Phone,Phone-audio,Phone-video .My source code is displaying like below..Please help me to select either Phone-audio or Phone-video.
<ul>
<li class="Searchitem"></li>
<span value="AL">Phone</span>
<li class="Searchitem"></li>
<span value="AL">Phone</span>-audio
<li class="Searchitem"></li>
<span value="AL">Phone</span>-video
</ul>
That html doesn't make any sense, and definitely isn't per standard. Neither the span nor the -audio or -video are inside the li tags. I'm not even sure what element you need to click.
If it was html was compliant it would be as easy as:
browser.span(text: 'Phone-video').when_present.click
or maybe this would work, depending on the rest of the site's html, but it would be very flaky if anything changed:
browser.ul.span(index: 1).when_present.click
<div id="container">
<p>
<div>a</div>
<div>b</div>
<div><span>foo</span>c</div>
</p>
<p>
<div>e</div>
<div>f</div>
</p>
<p>
<div>g</div>
<div><span>foo</span>h</div>
<div>i</div>
</p>
</div>
I would like to get last div which contains foo, ie div with h.
Online test : http://try.jsoup.org/~Ef0KHIiN77L_DANA7e4SpYZSVEM
You can't do this with a selector alone. The best you can do is
#container div:has(span:containsOwn(foo))
but you'll still need to grab the last element separately using .last() after you run the selector.
I would try this, but it is not a pure CSS solution, since you can't select easily the last element of a selection.
Element el = doc.select("div:contains(foo):not(:has(div))").last();
My selector selects all divs that contain "foo" but do not contain any other divs.
I'm experiencing some very peculiar behaviour--I'm new to angular, to spare you the noob questions, I tired my best to find the solution but after many hours, I think it's time to give in and ask.
Code Summary: Alphabet array, is looped(ng-repeat) and each letter is linked to a function called clickLetter(), this function sets a $scope variable that reflects the current chosen alphabet letter.
Problem: the model/variable in charge of displaying the current active letter is not updating ALL the time, it only appears to update sometimes, randomly it seems.
Code (plunker)
My guess is, angular is not updating the model (two-way data-binding?) as fast as it should?
It looks like the <a> tag is triggering a route change. Either add an $event.preventDefault() to it or remove the <a> altogether. (doesn't seem like it's adding any value)...
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
or
<div class="ui icon button padding5" ng-class="{'active': letter == activeLetter}" ng-repeat="letter in letters" ng-click="clickLetter(letter, $event)">
{{letter}}
</div>
The problem is, when you click on letter and not on button,the link stops the propagation of your mouse click.
Add this class in your css file and apply to <a> tag, which holds the letter:
.ignore-mouse-event {
pointer-events: none;
}
<a> tag should be changed to this:
{{letter}}