I have written below xpath to refer to only the text of 'li' element, but it refers to entire 'li' element as highlighted in the image. What should the xpath which can refer to text of 'li' element in my case?
//div[#class='parent']//ul[#class='list-none']//li[contains(text(),'7')]/text()
Related
I am trying to find the Xpath for the below image. The one on the right is the Download File link and the right is element DOM.
enter image description here
I have tried with directly copying the Xpath and also used the Contains text "Download File" but my script is not working and giving No Such Element exception.
Could you please let me know the possible Xpath for these.
Thanks !
Tried to find Xpath's using contains and as list, but did not work.
To identify the li element, you can use //li[contains(.,'DOWNLOAD FILE')]
.(dot) can compare the text of any children or descendant elements of li, whereas text() can only compare the text of li element.
If you want help to identify the exact element, you will have to provide the DOM of li children as well.
I would like to use a CSS selector to select a specific child TAG but only if parent has no other children or text.
In this specific case the <a> tag that needs to be selected is wrapped in a <p> tag.
I'm looking for a CSS-only solution (I'm curious to know if it's actually possible)
<p><a>This is selected</a></p> // selected
<p><a>This is NOT selected</a><span>other children</span></p> // NOT selected
<p><a>This is NOT selected</a>Other text</p> // NOT selected
What I would like to do (not in IE obviously) is:
p:not(.list):last-child + :text {
margin-bottom: 10px;
}
Which would give a text node a margin. (Is that even possible?) How would I get the text node with CSS?
Text nodes cannot have margins or any other style applied to them, so anything you need style applied to must be in an element. If you want some of the text inside of your element to be styled differently, wrap it in a span or div, for example.
You cannot target text nodes with CSS. I'm with you; I wish you could... but you can't :(
If you don't wrap the text node in a <span> like #Jacob suggests, you could instead give the surrounding element padding as opposed to margin:
HTML
<p id="theParagraph">The text node!</p>
CSS
p#theParagraph
{
border: 1px solid red;
padding-bottom: 10px;
}
Text nodes (not wrapped within specific tags) can now be targeted in very specific use cases using the ::target-text pseudoelement selector. A query parameter (url-encoded; e.g. whitespace must be encoded as %20) that matches a string of text can be styled like this:
::target-text { /* color, background color, etc */ }
Just like other highlight pseudoelements, only certain style properties are supported, as listed here.
There is a demo for this (parent link is on the MDN page for ::target-text). Change the query parameter string for 'text' to different strings to see how different text becomes styled.
One limitation of the ::target-text pseudoelement selector is that only the first matching string of text can be styled. In addition, at 67.8%, browser support is modest as of January 2022.
What is the XPATH I should use to extract only the inner text present in all the div elements.
//div/descendant-or-self::*/text()
Expression gives all text in does not matter how deep inside.
Do I need to wrap a tag (a href="#") in a <p> tag? I guess it can be wrapped in any block level element like div but I'm not sure.
It is an inline element and doesn't have to be wrapped anywhere.
The page body is already a block-level element, so anything you have inside it is respectively wrapped by it.
No. If you want to make the anchor element block level you use the css property display: block;
Google Mail
You can wrap an anchor in a p element if you want to do something like:
<p>My favorite search engine is Google, because it allows me to fine tune my search</p>