<div class="thumbnail-popular" style="background: url('http://images.gogoanime.tv/images/upload/Go!.Princess.Precure.full.1812487.jpg');"></div>
I am trying to get the url component of this div class but I seem to be unable to fetch that specific data in the div class.
I have looked into making use of attributes but my attempts have been unsuccessful so far.
Usage of this CSS selector is through Kimonolabs.
div.thumbnail-popular should get you the element you're looking for — unless there is more than one such element, in which case you will need to narrow down your selector.
For example you will need to find out if this particular element belongs to a specific parent, or is the first, second, ... nth child, or any other information about the surrounding elements in the page that you're working with.
The background URL is in a style attribute on this element, so you will need to extract that attribute as described here. However you will still need to parse the declarations inside the style value in order to get the URL; I am not sure if it is possible to do this through kimono as I am not familiar with it (I'm not sure what its advanced mode really does, and it's difficult to tell from the lone screenshot that is provided in that help article).
Related
Instead defining:
<div id="my-custom-element-101"></div>
I wrote:
<my-custom-element-101></my-custom-element-101>
But didn't go further to extend HTMLElement and define it. This way I get some enhanced readability and don't need to do any further coding.
Is there any potential downside to this practice?
There's no absolute downside for that, as soon as you use valid custom element notation (i.e. a name with an hyphen "-").
In this case it's just an unknown custom element.
Of course if someone else decide to define a custom element with the same name you could get into some troubles but if you own the entire code of the page it can't happen.
Also note that, in your example, your tag <my-custom-element-101> is seen as an inline element, not a block.
On this twitch site there is an annoying element that I want to remove permanently. On the inspector the element is this:
<div class="menu-button hover-background-primary">
But try as I might, I can't figure out how to write a filter to remove that element with Ublock.
I read that Ublock and ABP use the same syntax. According to this,
##.menu-button hover-background-primary
should do want I want. But I can't block anything with this pattern, I tried it putting the names of other classes there and it never does anything. How does this work?
The two classes are separated only in the html - you need to join them together in the rule declaration. And in the html the "." is never shown but when you target classes in either CSS or javascript - each class needs to be prefixed with a "." otherwise the browser will interpret that you are trying to target a html element with that name - irrespective of whether it is correct or even present.
##.menu-button.hover-background-primary
What this targets is the items that has both the "menu-button class" AND the "hover-background-primary" class
you could even just target the more specific class-
##.hover-background-primary
Those are multiple classnames.
You need the selector .first-class-name.second-class-name, which you can put in filter syntax as desired.
I wish to extract the entire CSS affecting a div that is highlighted. With complex designs the CSS is made up of many classes which add in some CSS. Looking for a technique that can strip out and perhaps concatenate all these together, like Inspect Element but cleaner.
For example, on this Adobe Experience Page(http://www.adobe.com/uk/products/experience-design.html). I wish to select the article div "A new experience in user experience." and then pull out all the CSS affecting everything inside it attached to a class.
There is an ExtractCSS tool that does something similar, but looking for something a bit more intuitive. That ignores all the strikethroughs too.
The simplest way is:
Select your element in the developer tools
Run window.getComputedStyle($0).cssText on the Js console
where $0 represents the currently selected DOM element.
In alternative, if you want to target a specific element with a given class, then do
window.getComputedStyle( document.getElementsByClassName('hero2-align-2 hero2-basis-0')[0] ).cssText
Querying elements by class name might return more than 1 element, the [0] is there to guarantee only one is processed.
Or by id
window.getComputedStyle( document.getElementById('yourID') ).cssText
I'm looking for a way to use a pure CSS selector (not script) to select an element's attribute, not the element itself. I know XPath can do it but can a CSS selector?
Example, given:
<img alt="image" src="photo.jpg">
Can I get to the src attribute with a CSS selector?
Update:
I don't want to set any element's values, I just want to select the text "photo.jpg".
Because CSS selectors originated as a fundamental part of CSS, and CSS can only apply styles to elements (since attributes are just element metadata, not standalone objects), CSS selectors cannot match attributes alone within CSS.
But I suspect you're not actually asking about CSS here. You're asking about selectors alone. You're probably using a web automation tool such as Selenium or one of the numerous HTML parsing libraries out there that support either CSS selectors or XPath. Some of these libraries support non-element selectors in the form of pseudo-elements such as ::attr() (I don't remember which ones), you haven't mentioned which tool you're using so I can't tell you for sure if you could use it. Note that this is not the same thing as the CSS attr() function mentioned in the comments — that is a CSS function, which is a value, not a selector, and therefore it cannot be used in a selector.
But if your library doesn't have such a feature then you'll need to either select the img element directly and query its src attribute separately (again, how you do this depends entirely on what you're using, which is why it helps to be specific about this sort of thing), or use XPath if possible.
CSS Tricks has an article that I believe answers your question:
https://css-tricks.com/almanac/selectors/a/attribute/
If you are trying to set the value of a certain element attribute using css, I'm pretty certain that is impossible for anything other than the content property.
CSS is not a programming language and can't process data.
Its sole purpose it to tell the browser how a certain element should look like, like in coloring a text red.
To process data in a web page you use javascript, which can make use of CSS rules though, to grab a certain type of elements in a web page, for example this, which will return a list of all elements of type img
var imglist = document.querySelectorAll('img');
Now, having a list you can loop through it and get each src like this
Array.prototype.slice.call(document.querySelectorAll("img")).forEach(function(img) {
var imgsrc = img.src;
// imgsrc now holds the image url, in your case "photo.jpg"
});
I am parsing the html code of one site with Jsoup. I need to find some html elements that has an specific id but their parent´s tree is complicating me the task. So I would like to know if is it possible to search an specific html element without having to search first all of their parents.
For instance I am doing the next:
Elements el=elements.select(".scroller.context-inplay").select(".zone.grid-1-1").select(".grid-1").select(".module-placeholder");
I would likte to know if there is a simple way to get the same element I get with this code searching by its id
The id of an html element should be unique within the page. Some html that you find in the wild breaks this requirement unfortunately tough. However, if your html source follows the standard you can simply use the # css operator to select the element in question:
Element el = doc.select("#someID").first();
Alternatively you can directly use the getElmentById Jsoup method:
Element el = doc.getElmentById("someID");
Also, if you decide to go by class names as you suggest in your question, it is easy to combine all selects into one selector:
Elements els = elements.select(".scroller.context-inplay .zone.grid-1-1 .grid-1 .module-placeholder");
The spaces in the CSS selector mean that any subselector right of the space must be a child of the stuff on the left side.