I'm trying to find an element by a CSS selector. I have a script which I'm using on multiple sites, and there is the same element, but with different classes. Is there any way to find by something like that:
css=div[(id='resultVersionA']||[id='resultVersionB')]
It must work for my next elements
#first-order price, #first price input[type='submit']
To be more clear: In upon query I want to select button which is under div which is I 'first_order price' OR 'first price'.
This should do it:
#first-order price input[type='submit'], #first price input[type='submit']
#first-order price, #first price input[type='submit']
Do both elements have different IDs as well as classes? If they have different IDs you could just use:
document.GetElementById('resultVersionA');
Otherwise, if this element is only used once on the page with a given class, then:
var rsltVerA = document.GetElementsByTagName('div').getClass('resultVersionA');
var rsltVerB = document.GetElementsByTagName('div').getClass('resultVersionB');
Related
Below is the dom structure of the page :
I have tried
button:contains("srave")
I also tried
button[innerText="srave"]
button[text="srave"]`
button[innerHtml="srave"]`
none of them work.
Need way to get elements when element attribute is not defined.
PS: textContent() return srave as outcome.
Edit:
I have many such button elements on the page. I know I can iterate through all of them and check text. But I want to get web element directly based on the text it contains to reduce the execution time
Did you try: button[class='k-button k-button-icontext'] or button[dir='ltr'] I don't think the cssSelectors you were attempting in your example are correct because you pluralized button. If neither of these work, it may be that there are more than one button on the page with the same selector. In which case it might be better to use xpath or you could get a list of all the elements with the same selector and then get whichever one from that list you created and click it.
No, you can't use CSS Selector. You can use XPath.
//button[text()='srave']
Or
//button[contains(text(),'srave')]
You can use jquery for get the same because css is not select the text.
Working fiddle
fiddle link
Try this
alert($('button').find('span').html());
You can use following css to get the button name with "srave".
HTML
<button data-name="srave">
<span>Brave</span>
</button>
css
button[data-name="srave"] {
background:tomato;
}
To add to danidangerbear here is a java method that will do what you want:
public String getElementText(String elementText){
List<WebElement> elements = driver.findElements(By.cssSelector("button"));
String elementText = null;
for(WebElement element : elements)
if(element.getText().equals(actualValue)){
elementText = element.getText();
break;
} else {
elementText = "element text does not exist";
continue;
}
return elementText;
}
I have a problem with table th, I can not set display none to the last th.
Here is my code:
#content-area-job-details #site-content-job-details .entry-content table.job-table tr th:last-of-type{
display:none;
}
when I use this code it set display to none for all th. I want only last th display none.
You can see my problem at:
http://westecmedia.com/?page_id=974
Help me please
This doesn’t work that way. :last-child or :last-of-type are always relative to the parent container. So in case of a table, that’s the tr element. If you match all tr elements in the table, and then get the last th for each, then you are matching every last th in each of those rows. So in your case, essentially all ths.
You would need to have a way to select that one tr which you are interested in, but other than maybe :nth-last-child(2), there is not really a good way to get that one. You should add an actual class to it.
Note that just hiding the th will not give you the desired result though. Table cells are always table cells, and unless you make them take more than a single cell, they will only ever occupy a single cell. So in your case, if you hide or remove that one th, the following td will not fill the whole row. It will only fit that very small cell where the th was previously located. You would have to add colspan="2" to the td in the markup to fix that.
You should use javascript to do what you need...
(function(window) {
'use strict';
function hideLastTh() {
var lastElement;
try {
lastElement = window
.document
.querySelector('.job_info')
.parentElement
.parentElement
.querySelector('th[scope="row"]')
;
lastElement
.classList
.add('hidden')
;
} catch(e) {
console.error('hideLastTh:ERROR', e);
}
}
return window.document.addEventListener('DOMContentLoaded', hideLastTh);
})(window);
I can see that your site uses jQuery. If you can add jQuery code, just add these two lines:
$("th:last").hide();
$("th:last").siblings("td").attr("colspan","2");
I have a question.
I have elements something like this:
<a> element with id = someGenerated Some:Same:0:name
<a> element with id = someGenerated Some:Same:0:surname
<a> element with id = someGenerated Some:Same:1:name
<a> element with id = someGenerated Some:Same:1:surname
I need CSS selector to get names. The problem is that I don't know how to get it.
I tried a[id*='Some:Same'] - it returned all <a> elements. After I can get elements which id ends with name. But I don't like this idea. I think that it can be done with some other selector.
Try this:
a[id*='Some:Same'][id$='name']
This will get you all a elements with id containing
Some:Same
and have the id ending in
name
<div id='element_123_wrapper_text'>My sample DIV</div>
The Operator ^ - Match elements that starts with given value
div[id^="element_123"] {
}
The Operator $ - Match elements that ends with given value
div[id$="wrapper_text"] {
}
The Operator * - Match elements that have an attribute containing a given value
div[id*="123_wrapper"] {
}
The only selector I see is a[id$="name"] (all links with id finishing by "name") but it's not as restrictive as it should.
#contentpage div
Does this mean select the div that has id #contentpage?
I am getting some bad layout. I am trying to select the div with the id #contentpage.
Could somebody also please tell me what the following css mean:
#myid div a
.myid a h
div #myid a
#myid div a
<anytag id="myid"><div><a rel="match">...
.myid a h
<anytag class="myid"><a><h rel="match">...
div #myid a
<div><anytag id="myid"><a rel="match">...
If you would like to match a div with id #myid, then either ignore the fact that it's a div (ids are unique anyway) or match it as follows:
div#myid
#myid div a
This will match an a within a div within an element with the id of myid. When I say "within" I mean anywhere within at any nesting level. The others are all the same but with different elements in different orders.
If you want an element with the id of contentpage you simply use #contentpage. If for some reason you wanted to specify that it was a div it would be div#contentpage.
if you want to modify the styling of the div with the id of contentpage then you would do the following
div#contentpage { //input styling here }
OR
#contentpage { //input styling here }
it also looks like you are trying to get at elements under the div these can be accessed in a number of ways but this is usually what I do
<div id="contentpage"><div><a></a></div></div>
#contentpage a { //stying }
#contentpage div a { //styling }
#contentpage {color:red} will select whichever element with id contentPage
#myid div a will select <a> elements that are inside <div> that are inside an element with id myid
.myid a h as far as I know there is no <h> element ? Without the h, it would select all links within any elements with the class myid (in this case myid is a dubious name, then, since its not an id per se)
div #myid a will select links inside of an element with id myid, but only if this element is within a <div>. It won't work if the element myid is a direct children of <body> for example
is there a way to select multiple div with css??
like
div id="text-box4"
div id="text-box5"
div id="text-box7"
etc
Native to ie7,ie8 and any other browser that accepts "substring matching attribute selectors" (cf. http://www.w3.org/TR/css3-selectors/), you can use the following syntax to select elements with multiple similar ids:
div[id^='text-box']
This basically says to the parsing engine, "select all div elements that have an id attribute which begins with 'text-box'
QRC:
[attribute^='text'] = attributes that STARTS with 'text'
[attribute$='text'] = attributes that END with 'text'
[attribute*='text'] = attributes that CONTAINS 'text'
CSS doesn't have a wildcard for that.
However if you use jQuery you can:
http://api.jquery.com/attribute-contains-selector/ or
http://api.jquery.com/attribute-contains-word-selector/
<div id="text-box4"></div>
<div id="text-box5"></div>
<div id="text-box7"></div>
<script>$("div[id*='text-box']").css("color", "red");</script>
like this?
#text-box4,
#text-box5,
#text-box7 {
/* your properties here */
}
CSS classes are designed for selecting multiple elements:
<div id="text-box4" class="my-text-box"/>
<div id="text-box5" class="my-text-box"/>
<div id="text-box7" class="my-text-box"/>
maerics' answer is correct. The CSS selector used to select the divs in that case would be:
.my-text-box {
/* Styles go here */
}