I have this structure
<div class ="wg-block">
...
<h4 class ="number" >
"Text"
I have to make sure that the element h4 with text "text" is in div.
I try this:
.useXpath()
.waitForElementVisible('/div[contains(#class, "wg-block")]/h4[text()="Text"]',1000)
but have an error.
How can I correctly be sure in visibility of this element?
Try to replace
'/div[contains(#class, "wg-block")]/h4[text()="Text"]'
with
'//div[#class = "wg-block"]//h4[normalize-space(text())="Text"]'
Note that starting / applicable for root element (which is html, but not div) and also / means direct child. So /div/h4 means h4 which is the direct child of a root element div.
You should use //div//h4 to match h4 which is descendant of div that is located somewhere in DOM
text()="Text" could be applied to match element <h4>Text</h4>,
but if you want to match
<h4>
Text
</h4>
you need to get rid of spaces and new line characters. In this case you can use normalize-space(text()) method or contains(text(), "Text")
Related
I have this structure:
<div class="class">
<h4 class="class2">
"Condition" </h4>
<div class = "click_class">Click_text </div>
</div>
I heed to click on the element with class ="click_class" if the h4 text == "Condition".
I try Xpath:
.useXpath()
.click('//div[contains(#class, "class")]//h4[text()[contains(.,"Condition")]
It is works. I found the h4 with text == "Condition". Now, in my opinion, I need to go to parent class and click on click_class.
.click('//div[contains(#class, "class")]//h4[text()[contains(.,"Condition")]..//div[text()="Click_text"]')
but it is not works.
How can I click on the element with text with condition in h4?
Try below XPath:
//h4[normalize-space(text())="Condition"]/following-sibling::div[#class="click_class"]
Alternatively, you can put the expression that check for text content of h4 in a predicate for the parent div instead :
//div[contains(#class, "class")][h4/text()[contains(.,"Condition")]]
and then navigate to return child div element that have class "click_class" :
/div[contains(#class, "click_class")]
So the entire expression would be as follows (wrapped for readability) :
//div[contains(#class, "class")][h4/text()[contains(.,"Condition")]]
/div[contains(#class, "click_class")]
demo
A question the instructor asked during a lecture:
Which CSS selector will select only the word "bar" for styling?
<p class="a">foo, <span class="a">bar</span></p>
span.a
p .a
.a span
All of these
The answer given was (4).
(1) is obvious because only bar (and not foo) can affected by a span selector with class a, but (2) and (3) are less obvious. Would someone break down what is happening in each case?
Let me elaborate each for you
span.a - This will select all the span tags in a document having class a
p.a - This will select all the p elements having class a
p .a - This will select all the elements having class a nested under p
.a span - This will select all the span tag nested under class a
Explaining your case
<p class="a">foo, <span class="a">bar</span></p>
a.span will change the bar color as it selects the span tag having class a
p.a will also change the bar color, as it is nested inside p tag having class of a. Hence span tag will inherit the color. (Also, I would like to point out here, this selector will change the color of foo as well)
p .a will select the bar as well, as the span tag having class a is nested under p
.a span will also apply color to the bar word as span is nested under a tag having class a
So technically answer is ALL OF THESE WILL CHANGE THE BAR COLOR
All of the above is the correct answer, because:
span.a /* Selects all span elements with class 'a' */
p .a /* Selects all child elements of p that have class 'span' */
.a span /* Selects all child span elements of elements with class 'a' */
Parent and child relationship. In all of these you are choosing the parent and navigating throught to the first child. If you had a list you would have to navigate through selectors with a nth child selector.
It is all pretty straight forward, here is an english walk through of the interpretation for CSS:
2) find <p> (the line), then inside <p> use class="a", so that's <span class="a">bar</span>
3) find class="a" and then inside of it <span>
I can't work out what this is:
Line 33 of http://twitter.github.com/bootstrap/assets/css/bootstrap-1.2.0.min.css
.row [class^="span"] {
display: inline;
float: left;
margin-left: 20px;
}
I understand the style but I've never seen this before
[class^="span"]
This means a class beginning with the word "span", such as:
<div class="spanning"></div>
The ^ symbol is taken from regular expressions, wherein this symbol refers to the beginning of a string.
It should be noted that this checks for the beginning of the class attribute, not the beginning of the classname. Which means it will not match said selector:
<div class="globe spanning"></div>
The above element has two classes, the second of which begins with "span" - but since the attribute class begins with "globe", not with "span", it will not match.
One could use [class*=span], which would return all classes containing span, but that would also return other classes, such as wingspan.
AFAIK, the way to get classes that begin with a string are to use a double selector:
.row [class^="span"], .row [class*=" span"]{}
This will return the class beginning with span, whether at the beginning of the attribute, or in the middle.
(I also recall working in a solution in the homegrown selector engines used by DOMParser).
That is an attribute selector, specifically one of the CSS3 substring-matching attribute selectors.
This rule applies styles to any element whose class attribute begins with span (^= means "starts with"), that occurs in any element with the class row.
That is a CSS attribute Selector.
Have a look at http://www.w3.org/TR/css3-selectors/ (Section 2)
E[foo^="bar"] an E element whose "foo" attribute value begins exactly
with the string "bar"
What does the following CSS syntax mean?
.x-data .x-time span
it is a selector for a span that resides in a div (or anything) with class .x-time, which inturn is nested inside a class .x-data
for example, if you had the css like:
.x-data .x-time span {
font-size: 12px;
color: red;
}
and then a structure like this:
<div class="x-data">
<div class="x-time">
Time: <span>12:00</span>
</div>
</div>
then the 12:00 is going to be in font size 12, and in red. where as "Time:" part is just going to follow the inherited format.
It targets the span elements inside elements with class "x-time", which, themselves, are also inside element with class="x-data".
Selects any span element that is a descendant of any element with a class attribute that contains the word x-time that is a descendant of any element with a class attribute that contains the word x-data.
via SelectOracle. I recommend giving Selectutorial a read too.
its like saying Donkey's Tail's Hair.
so .x-data will be donkey
.x-time will be tail
span will be hair!!
so .x-data's .x-time's span.
get it?
any element with a class of '.x-data' containing any element with a class of '.x-time' containing any <span> will be styled.
eg.
<p class="x-data">
lipsum
<span class="x-time">
<span>lipsum</span> <!-- only this guy is styled -->
<strong>sdadsa</strong>
</span>
<span>dolor</span>
</p>
In the IUI css file, they use the following selectors:
body > *:not(.toolbar)
body > *[selected="true"]
What does the >, *:not() and *[] mean?
Thanks.
> means "is a child element of". So body > *:not(.toolbar) matches *:not(.toolbar) that is a child of body.
*:not(.toolbar) matches any element that does not have the class .toolbar.
*[selected="true"] matches any element with the selected attribute equal to true.
Keep in mind that the last two (*:not() and *[] are part of the CSS3 spec and you usually can't rely on them for cross-browser CSS compatibility. They are, however, fully supported in WebKit which is what the iPhone (and consequently iUI) use.
> means a direct child
* is a universal selector (everything)
:not() means anything except what's in the parentheses
*[] means anything that matches what's in the brackets
In your case:
body > *:not(.toolbar) // means any element immediately under the body tag that isn't of class .toolbar
body > *[selected="true"] // means any element immediately under the body tag where the selected attribute is "true"
> and * are defined in the CSS 2.1 specification. The :not pseudo class and the [] selector are defined in the CSS 3 specification.
See: http://www.w3.org/TR/CSS21/selector.html and http://www.w3.org/TR/css3-selectors/ for more info.
> - Child selector
I.e.
div > p > b {
font-size:100px;
}
This will select all b tags inside p tags inside div tags.
:not(..) - not selector
Matches any element on the page that does not meet the criteria in the parenthesis of the not statement. i.e.
div:not(.toolbar)
Will match any div that does not have the class toolbar
[attr='val'] - attribute selector
This matches any element where the attribute matches the specified value. Example if you want to make all checked check boxes red.
input[checkec='true'] {
background-color:red;
}
You should Google CSS 2.1 selectors for more information.
means child element
.cont > div {
color: #fff;
}
This would be:
<div class="cont">
<!-- NOTE: THIS NOTE IS TO TELL YOU WHICH IT AFFECTS
It only affects the below div. Not the p.
so "jabberwocky" text would be white, but "lorem ipsum" text in the p, would be the default font color. -->
<div>jabberwocky</div>
<p>lorem ipsum</p>
</div>