Currently I was going through some code over internet and I found this part of the code input[type=text]:not(.browser-default).valid. In the following code I know what :not is used for. However I have following question:
What does (.browser-default) part of the code does and where can I find more information about it?
I know what is :valid but not .valid? What it does and where can I read its exact functionality?
Both .browser-default and .valid are user-defined class names. They are not part of the CSS Selectors Module - so you won't find more information about them!
In contrast, :not and :valid are CSS pseudo classes and are defined within the CSS selectors module.
So basically, the selector
input[type=text]:not(.browser-default).valid
matches a text input with a class valid and without a class browser-default
.browser-default and .valid are class names that programmer defined in his code and thay are not keyword in css.
input[type=text]:not(.browser-default).valid
this selector, selects input if it have the following conditions:
input have :
1) attribute type with value text.
2) class valid
And have not :
1) class browser-default
See this example :
input[type=text]:not(.browser-default).valid {
background-color: blue;
}
<input type="text" class="valid">
<br>
<input type="text" class="browser-default valid" name="">
Related
HTML
<label for="email">Email</label>
<input type="text" name="email"></input>
The class attribute of the email input element may change, like if the user enters an invalid email format. I only want that label to change to red when the input it's for gets the class "invalid".
In fact, I want ALL my labels with a for attribute to be "invalid aware" of their assigned input elements.
CSS Attempt:
label[for=*.invalid]{
color: red;
}
The above is probably incorrect because I might have to specify a specific form element by name.
Option 1
If you're adding a dynamic class to the input element (.invalid), why not add a class to the label element, as well? This would simplify the styling of the label when the input fails validation.
Option 2
I understand that changing the label color to red highlights an error to the user. In this option you still highlight an error to the user, but in a slightly different way. The CSS :valid and :invalid pseudo-classes represent form and input elements that validate or fail to validate. These pseudo-classes style the input not the label.
Option 3
This option involves the sibling and attribute selectors. You would have to reverse the order of your label and input in the HTML (but this doesn't have to change the appearance on the screen; see below).
HTML
<input type="text" name="email" class="invalid"></input>
<label for="email">Email</label>
CSS
input[class="invalid"] + label { color: red; }
Changing the visual order of elements with CSS Flexbox
Despite the order of elements in the DOM, you can still change the visual order of elements with CSS Flexbox. So if you didn't want to put the label after the input for the sake of appearance there's an easy workaround: Wrap the input and label in a flexbox and use the order property to arrange their display order.
A few side notes...
HTML5 provides an input type="email", which you may want to consider instead of type="text". One benefit being that when mobile devices see type="email" they often launch an e-mail-friendly keyboard.
Second, the input element is a void element. No closing tag required. You can safely remove the </input>.
Lastly, the for attribute associates a label element with a matching ID. In your code, you would need to add id="email" to your input for the label click feature to work.
The for attribute has to match the id (not the name, not the class) of the associated input.
In order to change the label based on a feature of the input you need to either:
Use combinators to draw a connection between the two elements (which is impossible when the label precedes the input) or
Use JavaScript to modify the label (e.g. by adding a class).
So I want to target multiple html element(s) like the below using a regular expression in a css selector:
<input id="something_stuff_013_work" />
<input id="something_stuff_016_work" />
The following CSS selector doesn't seem to work:
input[id*='[0-9]*_work']
I need to do something with digits in the regular expression because the inputs can be dynamically added and will be assigned ids with digits in them.
What am I doing wrong?
What about using the following selector:
input[id^='something_stuff_'][id$='_work']
It will get inputs with id starting with "something_stuff_" and finishing with "_work".
CSS does not support regexes in selectors. Use classes or starts-from and ends-with attribute selectors.
An approach to this problem would be to use classes instead of ids and have things that are styled the same to be classed the same. for example:
<input id="something_stuff_01_work" class="input_class">
<input id="something_stuff_02_work" class="input_class">
<input id="something_stuff_03_work" class="input_class">
Then select the class instead of the id.
.input_class {
sweetstyleofawesomeness;
}
Try prefixing the numeric id with \3.
I came across this today, it was the selector generated using chrometools, I'd not seen it before, and it works using Chromium Webdriver:
#\37
Full selector used is "#\37 > div > div.cell-text".
This was a selector to select an element with id = "7".
It (prefixing with \3) seems to work throughout the document I am looking at automating, with my current setup.
Apologies for the beginner css question but it's rather difficult to find an answer for this.
I'm looking at the duckett book for html and css and it has a couple of selector syntax confusing to me.
table.one{}
input#web{}
I thought that the .x indicates that x is a class selector and similarly that #x indicates that x is an id selector but why did the author choose to put text before these? He didn't give an explanation as far as I can tell.
table.one matches all table elements which have class one.
input#web matches the input element which has id web.
This kind of selector is called "Type selector". You can read these resources:
CSS2.1 spec
Selectors Level 3
Selectors Level 4
MDN article
table.one{}
'[element type].[css class name]{}
input#web{}
'[element type]#[id attribute]{}
When an element type is specified, that means that definition will only work for that element type.
table.myCss{} for the Element, when class='myCss' then apply the css. Don't apply this CSS to <span class='myCss'> or any other element type.
Here is a link to the official specifications page for CSS3. http://www.w3.org/TR/css3-selectors/
Let me break it down:
table.one means, look for a tag with the name table, which also has the class one
input#web similarly means: look for an element with the name input and the id of web
In some cases, these selectors might not be necessary, especially on IDs, since they are supposed to be unique, as opposed to classes, which are reasuable. The usage of element names with classes, however, can help you make different elements look different than others, for example, if you want to center text and a div, you might only want to use one class for both, but since <div> elements are block level, they can't be center like text by default.
div.center {
margin-left: auto;
margin-right: auto;
}
p.center {
text-align: center;
}
<input class="x" ... >
<div class="x" ... ></div>
So now we have:
.x {} // To select both
input.x {} // To select just the input with class "x"
div.x {} // To select just the div with class "x"
This could be used to just make it more clear for what element the styles are for. Or to limit the elements affected.
Similarly we can do this with element ids.
<input id="a" ... >
<div id="b" ... ></div>
So we can write simply #a. Or we can write input#a. Currently these are equivalent.
With the div we would have either #b or div#b.
The use of table and input in front of their respective classes / IDs reference the type of element in the markup. For example:
table.one {
..
}
References a table with class "one" (in code: <table class="one">). This way, if the author has another element with class "one" (example: <div class="one">), the div is not affected by the rule of table.one.
Same idea for input#web, except the selector is targeted towards input tags with ID of "web" (<input id="web">)
Some additional reading from W3 may be of some help (it's from CSS2, but the main points are still present): http://www.w3.org/TR/CSS2/selector.html
DEMO: http://jsfiddle.net/uWkYL/
I'm using the following in some selenium code:
WaitForElement(By.CssSelector("#document-count:contains(<number greater than 0>)"));
Specifying the number greater than 0 is where I'm stuck. Is there any way to use only css to check and see if an element's innertext has something other than 0?
:contains was deprecated in CSS3. Since WebDriver ties directly into the browser, it's unable to use that pseudo-class.
Is there any way to use only css to check and see if an element's innertext has something other than 0?
Unfortunately not. CSS really screwed Selenium users over with their deprecation of both :contains and :nth
As Arran said, you can use xpath, or - if you are willing to experiment with C# and CSS together (not just css as you state) then you can come up with something to loop x amount of times checking the text.
Per Chris Coyier at CSS Tricks:
Deprecated
:contains() - As far as I know, this is gone. The current
CSS3 spec has removed it. I don't know the story, let me know if you
do. At a glance, it looks ridiculously useful (being able to select
objects based on the textual content they contain). It may be because
of problems, or having content in selectors being undesirable. My
preference would be to have it select by elements rather than text,
like p:contains(img), but alas, no such luck.
That said, if you were to set the value properties, you may be able to use :not([value="0"]):
See jsFiddle demo
HTML
<div id="doc">
<input type="text" value="0" />
<br />
<input type="text" value="1" />
<br />
<input type="text" value="2" />
</div>
CSS
#doc input[value="0"]
{
background: red;
}
#doc input:not([value="0"])
{
background: green;
}
Result
I spotted this (to me) curious css style in the default Site.css file of an ASP.NET MVC project:
.text-box.multi-line
{
height: 6.5em;
}
Is .text-box.multi-line just the name of a class that happens to have a dot in the middle of it, or is this a nesting of two classes? Or is it something else entirely? Can you explain?
And can you provide a usage example?
Edit
Thanks for all the answers. This seems to be an omission from the w3schools css reference page.
it matches an item with both classes, ie.
<textarea class="text-box multi-line"></textarea>
It will not match if the item only has 1 of the classes.
It will match if the item has those two classes plus additional ones.
It means that the element has both classes.
It will select an element with the class text-box that also has the class multi-line
This would be the same:
.multi-line.text-box {}
.text-box[class~="multi-line"] {}
An example:
<p class="multi-line text-box some-other-class"></p>
It's selecting an element like this:
<* class="text-box multi-line"></*>
Any element that has both the text-box and multi-line classes.
It will select this element:
<textarea class="text-box multi-line" />
Or any element with both the text-box and multi-line classes for that matter.
Here's a quick little fiddle to show the difference:
http://jsfiddle.net/sGn2v/
basically it'll match an element having BOTH classes!