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.
Related
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="">
I have a HTML like this in my QWebView
<div class='a' id='root'>
<div id='x'>...</div>
<p> ...
<p>
...
<div id='x2'>...</div>
<div>
<a href='go/xxxx'>go</a>
</div>
</div>
How do I select the a? I tried this selectores:
div[id='root'].a
div[id='root'] + a
but it didn't worked. Code:
QWebFrame* frame = webView->page()->mainFrame();
QWebElement button = frame->documentElement().findFirst("div[id='root'].a");
assert(!button.isNull()); // gets executed
Your selector is selecting the div with id='root' and class='a'. If you want to select the a tag inside of that div, you need to make your selector:
div[id='root'].a a
The additional 'a' at the end of the selector tells jquery to select the a inside of the div.
You can switch to using XPath 2.0 in Qt to have more expressive freedom, but then you need to process your HTML as XML.
To resolve, add a descendant selector1 for a. I.e., change this div[id='root'].a into this:
div[id=root].a a
As an alternative, if there's a bug in Qt, try:
div[id=root][class=a] a
Or (which is potentially a bit wider):
div[id~=root][class~=a] a
These last two are just alternatives in case for some reason the original fix to your code (adding the a descendant selector) didn't work.
The code snippets above doesn't use quoted strings, this is optional.
1 adding a was seen in stevenc4's answer), after my original (wrong) solution. Kudos to him :)
I have a <p>Example string</p> With some text inside. I want to use css to search for a word within that paragraph.
I know this is possible if you have e.g. All you have to do then is:
a[href*="test"]{}
But when I try to do this with my paragraph I can't seem to get it to work. I've tried:
[p*="string"]{}
p[*="string"]{}
The short answer is NO, this is not possible using CSS only, what you are using is element[attr=val] selector which only selects elements with that particular attribute with that specific values. You need to use jQuery or Javascript with a regex to track the pattern and apply styles to its elements.
On the other hand you can create custom attributes with a prefix of data- so for example you can do something like
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text">Want to change this</p>
<p data-custom="Holder Text 2">Dont Touch This</p>
p[data-custom="Holder Text"] {
color: red;
}
Demo
But again, this won't make sense here, you can simply assign the classes if you are aware what elements need to be changed.
You cannot this using CSS only, however you can check this blog post about how to achieve this using jQuery.
Basically you should use :contains selector:
$("p:contains('John')")
I have the following html snippet:
...
<div>
<a></a>
<select class="error"></select>
<label class="error"></label>
<div></div>
</div>
...
I need to select the "a" tag with CSS. Is this possible?
I am trying to select the "a" tag. The error class is dynamically injected via javascript. I want to have a static css rule that makes the "a" tag red.
I am only interested in a CSS approach using selectors. If this is not possible, I do not need help with alternative approaches.
~~~~~~~~~~~~~~
EDIT:
~~~~~~~~~~~~~~
The only thing that separates this "a" tag from other "a" tags is the presence of the error class elements following it. The error class is dynamically applied. I do not want to select other "a" tags that do not have an error class following it. I only want to select this "a" tag when it is followed by the error class.
~~~~~~~~~
EDIT AGAIN:
~~~~~~~~~
I explained that poorly. I was hoping that I could select the first child (or something) of all divs that contain the error class.
It is not possible. CSS has no tools for selecting an element on the basis of its siblings after it. Even CSS Selectors 4 (which contains many proposed, but not approved or implemented, additions to selectors) lacks such a feature. (If it will ever be added, I suppose it would be called “preceding-sibling combinator”.)
<style>
.mylinkclass {
...style info goes here
}
</style>
...
<div>
<a class="mylinkclass"></a>
<select class="error"></select>
<label class="error"></label>
<div></div>
</div>
...
Just selecting the anchor will give you what you want in that specific layout.
a {color: red;}
-- Edit --
Since you changed your question, here's a new answer:
Use JS to check if siblings of a particular type exist.
$('a').each(function(){
if ($(this).siblings('.error').length > 0)
$(this).css('color','red');
});
Regarding your updated question, try this hackish solution:
div a:nth-last-child(4)
{
background-color:yellow;
}
if you can count on the fact that your DIV has 4 and only 4 elements inside (the anchor being the first) when the error elements are present and fewer (or more) elements otherwise.
Anyway, you're probably better off using Javascript for this (or proper HTML).
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!