How can I only get the article and nothing else using css selector from the elements available in the below link. I would like to use this selector in my parser written in python.
I tried like:
div.user-review p
Using the above selector I get other things as well which I don't want. I want only the article.
Here is the link leading to the elements containing the article:
"https://www.dropbox.com/s/readzjpl0bca3zr/Elements.txt?dl=0"
Try below CSS selector and let me know if it doesn't fetch desired output:
div.user-review p.lnhgt ~p
Related
I am taking practice test for Microsoft 70-480. I came across the question in the image. To select attributes that end in specific given value should be a css attribute selector such as [attribute$='value']. I don't understand how we make that selection with a css pseudo-element. Can some one explain to me why
As you've correctly stated, you need an attribute selector for this (although you would need to use [attribute*=value] instead), and you can't match elements using pseudo-element selectors (that's why they're called pseudo-elements!).
The only explanation for the "correct answer" here being option C is that whoever wrote that test either made a mistake with the options, or doesn't understand CSS selectors. Hopefully the former.
I've an element with text List which I want to use. I can write xpath like -
//li[text()='List']
but instead of using xpath, I want to use css. How should I write css for it? I tried with following by referring https://saucelabs.com/resources/selenium/css-selectors but didn't work.
li:contains('List')
The CSS feature :contains('some text') is deprecated, you should only use xpath in your case. There is no way to do that using CSS
I am familiar with the :empty selector to select an element that contains no tags and also no text, but that's a step too far for me. I would like to know if there is a way to select tags that contain no child tags, but may contain some text.
For my purposes, it is acceptable to use CSS which only works on the latest version of Google Chrome (since this is intended for a Chrome extension).
The only way you can achieve this via CSS is by excluding every tag that could fit as child of that specific parent with the :not selector.
However, with JQuery you can do that by using the following code (for example):
if ( $('#myParent').children().length == 0 ) {
// do something
}
I have a number of elements with specific css class on the page (let's say item). Is it possible to apply a css style on the (N-1)th .item? For example it there are 9 elements then I need to style 8th.
I know about :nth-last-child(2). But it doesn't work in my case. It searches for CHILD elements but in my case elments are distributed between different parents.
jsFiddle of what I need
use the child combinator selector (>) with body along with #Zenith's solution
body > :nth-last-child(2)
http://jsfiddle.net/fWRw8/2/
Yes, you can use the :nth-last-child(2) selector to get the second-last element.
Here's a jsFiddle example.
This isn't supported in older versions of IE, so here's a link to a quick hack which will get it working there too.
Edit: In regard to your specific use case, sadly it looks like there isn't any real solution using just CSS. My initial thoughts were :nth-last-of-type but as you're basing it on a class and with different parents that won't work. :nth-last-child is also based on the parent so that won't help either. Sadly, there is no class-related selectors similar to these either so I'm afraid to say you may have to do it via. jQuery.
I check this selector:
h3:nth-child(1):contains('a')
selector doesn't work?
I check this in firefinder and does return nothing (not info that there is zero elements)
Then check this:
h3:nth-child(1)
and it returns h3, so selector is almost good, but something with this(h3 has text 'a') text goes wrong.
:contains() is not was going to be a CSS3 selector (thanks T.J. Crowder for the link), but it didn't make it, most likely because the way it works tends to lead to severe performance and over-selection issues. For example, if an element E matches :contains() for a given string argument, then all of its ancestors would also match; using it with a universal selector would lead to unexpected results with certain style properties, on top of being slow for the browser.
There is no other CSS selector that serves a purpose like :contains(). So you'll have to find some other way, either by modifying your HTML or even by using jQuery's :contains(), to achieve the effect you want:
Select an h3 element
if it is the first child of its parent
and its text contains the letter 'a'.
For jQuery and Selenium RC users: :contains() is implemented in the Sizzle selector engine used by jQuery, which is also used in Selenium RC (but not Selenium WebDriver). It works as described in this decade-old revision of the CSS3 spec, but again, due to how the spec describes it, you need to use it with care or it may lead to unexpected selections.
On a final note, h3:nth-child(1) can be replaced with h3:first-child, which as a CSS2 selector has better browser support.
If you're trying to use :contains(a) to find an anchor tag (rather than the letter A), you could use:
h3:nth-child(1) a
or
h3:first-child a
The :contains() pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome.
You can find a couple of detailed discussion in:
selenium.common.exceptions.InvalidSelectorException with "span:contains('string')"
Finding link using text in CSS Selector is not working
Solution
As a solution you have to drop the contains() part and your effective locator will be:
h3:nth-child(1)
Further as #BoltClock mentioned within his answer, you can also use:
h3:first-child
As an alternative, you can also use:
h3:first-of-type
tl; dr
selenium.common.exceptions.InvalidSelectorException with "span:contains('string')"
Finding link using text in CSS Selector is not working