While trying to understand bootstrap I came across this :
.control-group.error input, [...] {
[...]
}
It looks like a descendant selector but .control-group.error is a class.
I looked through this and I couldn't find anything : http://css.maxdesign.com.au/selectutorial/
Can anyone give me some pointers ?
Assuming I've understood your question correctly, .control-group.error will match any elements that have both control-group and error class names.
As you said, the input will match any input element that is a descendant of any element with the class names control-group and error.
For example, it would match:
<form class="control-group error">
<input> <!-- It matches this (both class names on form) -->
</form>
And it would not match:
<form class="control-group">
<input> <!-- It won't match this (only one of the class names on form) -->
</form>
Related
<div class="form-item">
<label class="form-item-label">Mailing Account:</label>
<div class="form-element">
<div class="form-field-wrap>
<input class="form-text x-form-field x-combo-noedit">
</input>
I am trying to locate the element <input class="form-text x-form-field x-combo-noedit"> comes under <label class="form-item-label">Mailing Account:</label>.
First element should be matched on text "Mailing Account:" and the second element on any of these classes "form-text x-form-field x-combo-noedit".
Can someone suggest a logic using using xpath or cssSelectorplease?
Let me see if I understand you correctly, you want to find the element with the classes 'form-text' 'x-form-field' and 'x-combo-noedit', only if the containing div is a sibling of the label with text "Mailing account"
Way to do this using just xpath:
WebElement firstElement = driver.findElement(By.xpath("//label[contains(text(), 'Mailing Account:')]"));
WebElement secondElement = firstElement.findElement(By.xpath("./following-sibling::div[1]//input[#class='form-text x-form-field x-combo-noedit']"));
OR as you wrote if you want to match ANY of the classes then the "input" part of your second xpath to this:
//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]
If you want to combine everything into just one expression, you can use the following xpath:
String xpath = "//label[contains(text(), 'Mailing Account:')]/following-sibling::div[1]//input[contains(#class,'form-text') or contains(#class ,'x-form-field') or contains(#class ,'x-combo-noedit')]";
// and then just find the element
driver.findElement(By.xpath(xpath));
I have this composition :
<div class="theclass1">
<input type="checkbox" id ="1">
<div>
<div>
<div>
<label for="1">bla bla</label>
</div>
</div>
<input type="checkbox" id ="yy">
<label for ="yy">other</label>
</div>
<div class="theclass2">
<input type="checkbox" id ="2">
<div>
<div>
<div>
<label for="2">bla bla</label>
</div>
</div>
<input type="checkbox" id ="xx">
<label for ="xx">other</label>
</div>
</div>
</div>
I want (and I am super cofussed) to apply css styles to the label but only the first of 'theclass1'
I'm playing with first-of-type, first child, +div >div>div ,etc... without success.
Maybe somebody can explain me how to made this and if possible using some examples. I have a lot of troubles to understand the meaning of space, + and > selectors. Also... I think it can have more than one solution ?
I'd need code to style only the first label of theclass1, or the first inside >div>div>div but only this one. And something similar for theclass2.
Now I have a polluted css and undesirable results.
(The div 'theclass2' is inside div theclass1.)
Thanks in advance.
problem is not the CSS only, There are serious semantics errors in your HTML
id attribute name must not start with numbers
taken from HTML4 document of w3c
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
so much nesting , why these extra parent div div and div?
now first you fix the HTML nodes then apply below css
iff you want only first label of first div class
.theclass1:first-child > label:first-of-type
working DEMO
.theclass1 > div:first-of-type > div > div > label {
color: red;
}
http://jsfiddle.net/807t5L6z/
.theclass1 label:first-child {
color:red;
}
You could use this probably similiar code for label in .theclass2
General answer is that "global first label in HTML" couln't be done, see here: CSS global :nth-of-type selector (:nth-of-class)
And it's better to introduce class or id for this label.
However, if you want to target it without modifying HTML, you can use this selector:
label[for='1'] {
background:red
}
.theclass1 > div > div > div label {color:red;}
This question already has an answer here:
Why is my jQuery :not() selector not working in CSS?
(1 answer)
Closed 9 years ago.
I have a default class for my form which is defining some styles rules (scss format) like this:
form.simple_form {
$indent: 200px;
$length: 350px;
....
}
In some cases, I need other set of style rules to be applied to my forms, but I am not able to remove the simple_form default class from them (each form in my application is created with simple_form class).
Fortunately, I am able to set additional class of each form and using not css selector I am able not to apply the default form class for each form like this:
form.simple_form:not(.signup, .login) {
$indent: 200px;
$length: 350px;
....
}
That is working perfectly, but for some reason, the simple_form class is not applied for all forms no matter that they have not got the signup or login classes.
So, why the css selector is not able to get a form with simple_form class? Something more, If I paste in the console the following code:
$('form.simple_form:not(.signup, .login)')
It successfully returns the form.
Please note, that I am using ruby on rails and simple_form gem.
EDIT:
This is the HTML of the form that I want to select:
<form accept-charset="UTF-8" action="/webinars" class="simple_form new_webinar" data-remote="true" data-type="js" data-validate="true" enctype="multipart/form-data" id="new_webinar" method="post" novalidate="novalidate">
....
</form>
This is the HTML that I do not want to select:
<form accept-charset="UTF-8" action="/sessions" class="simple_form login" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="kmDnV10Pv3eQz09U9QKTjfLQ7zweu6teALh4DDjYmfk="></div>
...
</form>
The problem you're having seems to be the use of a comma-separated list of selectors within the :not() selector, each element to be removed must be selected ('unselected'?) one at a time (certainly in Chromium 25, Ubuntu 12.10).
Given the following HTML:
<p>No classes</p>
<p class="test">With class 'test'</p>
<p class="test1">With class 'test1'</p>
The following works:
p {
color: #f00;
}
p:not(.test):not(.test1) {
color: #000;
}
JS Fiddle demo.
Whereas the following (similar approach to yours) does not:
p {
color: #f00;
}
p:not(.test, .test1) {
color: #000;
}
JS Fiddle demo.
How to get the attribute of Title in the input element
<input type="image" title="Previous Page">
<input type="image" title="First Page">
<input type="image" title="Next Page">
<input type="image" title="Last Page">
What have you tried? Typically something like the following should work:
WebElement element = driver.findElement(By.tagName("input"));
String title = element.getAttribute("title");
The answer provided by Jim Evans is the correct one imo, but for a more specific one i'd advise something like below. Remeber that copy-pasta might not work and you need to change something to be able to work on your full HTML.
List<WebElement> elements = driver.findElements(By.tagName("input"));
for (WebElement element : elements) {
if (element.getAttribute("type").equals("image")) {
System.out.println(element.getAttribute("title"));
}
}
The above code will loop for all the in your webpage that are from type="image" and print on the console the "title" attribute of each one of those.
Still thing you should vote Jim's answer as the correct one though.
First, you need to identify the input element from which you want to get the value of the attribute title .
Then something like the following must work.
element.getAttribute("title");
Its very simple and work for as well.
String title = driver.getTitle();
I would like to replace next element of a given element and add css class to the next element.
I tried like this but it didn't work.
$(".validate_txt_sContactFirstName")
.next()
.replaceWith('<div>2</div>')
.addClass("atleastTwoChars");
<div class="xqh_Field">
<nobr>
<input name="ctl00$objContentPageTag$spzContactInformation$txt_sContactFirstName$txt"
type="text" size="25"
id="ctl00_objContentPageTag_spzContactInformation_txt_sContactFirstName_txt"
class="xqh_TextBox_Edit validate_txt_sContactFirstName error"
style="width:150px;margin-right:1px;">
<div class="atleastTwoChars"></div>
</nobr>
</div>
$(".validate_txt_sContactFirstName")
.next()
.text(2);
This is what you could use here. That way only the content of the <div> is edited. If you need HTML replace text(2) with html('<strong>2</strong>')
if i am getting you correctly you can do it in a very simple way, because when you already have the class atleastTwoChars in the div what is meaning of replacing it adding text in it and then add same class. you can just replace inner value of div.
$('.atleastTwoChars').html(2);
fiddle : http://jsfiddle.net/qXydv/