So I have a <div> which contains two classes <div class=vc_column-inner vc_custom_1583926619313>
I know how to select multiple classes with .class1.class2 and how to select a class attribute value that begins with "xx" div[class^="test"]
My question is, is there a way to select them?
The thing is I want to select all classes with vc_column-inner and vc_custom_ but all of them have different ending numbers.
(I cannot change the classes because it's predifined by Wordpress)
Use a combination of class name and attribute contains selector like so:
div.vc_column-inner[class*="vc_custom_"] {
/* your CSS here */
}
Related
I have been reading up on attribute selectors, such as ~ ^ | etc, but I cant figure out the following:
How do I target an element with a class starting with lets say "abc" and also ends with "xyz".
The way I have it now is this:
div[class^="abc"][class$="xyz"]{}
But if my element looks like this, it wont work:
<div class="foo abcDExyz bar">
It only works if abcDExyz is the only class in the class attribute.
Basically, I want to target a class that starts with something... and ends with something. In between that, anything can go (such as 'DE' in my example)
Is my only option to use * instead?
thanks in advance!
You can only do this if you can guarantee that the substrings "abc" and "xyz" will never appear in any other class names within that element's class attribute, and they will never appear separately:
div[class*=" abc"][class*="xyz "]
And even this falls flat when that class name is the first, last, or only one in the class attribute (unless you include the respective ^= and $= attribute selectors, but it's all still very fragile).
Otherwise, you won't be able to do this reliably with just a selector, or even a list of selectors.
You'd have a much easier time if whatever "abc" and "xyz" are supposed to represent was its own class name, instead...
For example, we have element like this:
<div class="first_class second_class"></div>
So we can find using it's classes:
browser.div(class: 'first_class')
browser.div(class: 'second_class')
But what is about multiple search? Can I use combination of them?
browser.div(class: 'first_class second_class')?
browser.div(class: 'second_class first_class')?
In this case, use a CSS selector directly:
browser.div(css: '.first_class.second_class')
Note that the "by class" locator is actually transformed to a "by CSS selector" under the hood.
For multiple values:
<div class="first_class second_class"></div>
You can specify as an array:
div(class: ["first_class"], ["second_class"])
Separated by comma , can be added more values to an array:
div(class: ["first_class"], ["second_class"], ["third_class"])
A CSS "contains" selector is
td[class*="foo"]
I can select multiple classes with
td[class*="foo bar"]
This however will fail for <td class="foo baz bar" />
How can I do a CSS "contains" wildcard select?
BTW: I cannot use td.foo.bar
The selector you're looking for is as follows, see this question for more details.
td[class*="foo"][class*="bar"]
However, if you need to use selectors like that then it's often a sign that your class name logic is bad.
Honestly I don't know what you mean by "failing" td[class*="foo bar"] selector as it seems working to me in your particular case.
However, since the class names are separated by white spaces, you could use multiple [attr~=value] attribute selectors to select the elements having the classes as follows:
td[class~="foo"][class~="baz"] {
background-color: gold;
}
WORKING DEMO.
From the MDN:
[attr~=value] Represents an element with an attribute name of attr
whose value is a whitespace-separated list of words, one of which is
exactly "value".
Visit : CSS-Tricks (CSS Attribute Selectors)
From the above for finding a match of a given string to the string in the class specified according to your question , the only option I find working and correct is * and ~.
1. Demo for *
2. Demo for ~
Multiple attribute matches
can we set a class name for HTML tag containing some spaces like this
<div class="drag-down drag-here">
this is the body part ..
</div>
.
If both of these classes are separate then your class attribute can contain these two classes separated by space. But if you are trying to create a class name with SPACE then it is not as per standards and will not work.
Even if you try to enter then browser will treat drag-down and drag-here as separate classes and not a single one.
Your way is to specify multiple classes.
This way separates the class names with a space, i.e. <htmlTag class="class1 class2"> or <div class="drag-down drag-here"> allows you to combine several CSS classes for one HTML element.
Naming rules:
Must begin with a letter A-Z or a-z
2.Can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
3.In HTML, all values are case-insensitive
The above rule doesn't mention a space so no space allowed to name a class attribute.
Classes can be whateve you want, but a space means a different class name. In your case, two classes: drag-down & drag-here
No. Class names can not have spaces in between. The space mentioned in your code describes that 2 different CSS classes are added to the element.
<div class="drag-down drag-here">
Means the div has two classes drag-down and drag-here. You can have any number of classes separated by spaces.
Yha sure,You can give space between the class name,
Also Refer this link SPACE BETWEEN CLASS
You can specify multiple classes, seperated by a space, but a given class name cannot contain spaces.
Please refer to HTML class Attribute
Well, the HTML from your question is valid. However, it is interpreted as two seperate class names:
drag-down
drag-here
because a space seperates multiple class names. Unlike the id attribute, the class attribute can contain multiple values.
So, when using for instance CSS, styling rules targeted at div.drag-down and div.drag-here will both be applied to this element.
Also see the W3C documentation.
spaces cannot be used! better use an underscore like this:
<div class="drag-down_drag-here">
this is the body part ..
</div>
If
.animal {background: yellow}
will apply the styling rule to any elements with a class containing the word animal, even if it also contains other words eg...
<li class="toy animal">Toy Bear</li>
then what is the need for the below syntax for selecting by partial attribute?
*[class~="animal"] {background: yellow}
Thanks
The only difference is, you can use .value syntax only for classes, when [attribute~="value"] can be used to match any attribute values.
But when you use [class~="className"] to match class attribute values, it is equivalent to standard .className syntax.
According to the selectors spec, the period . is an alternative for the ~= notation for the class attribute.
Thus, for HTML, div.value and div[class~=value] have the same meaning
Just to clarify the ~= meaning:
E[foo~="bar"] an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
Note that this is different than *=
In other words, .animal and [class~=animal] (without the *) are the same.