Css selector class contains class

Wildcard Selectors (*, ^ and $) in CSS for classes

In CSS, selectors are used to selecting the elements by class name, id, tag, etc. There are also some wildcard selectors available in CSS, which we can use to define the queries to select the HTML elements.

Wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as class or id. In this tutorial, we will learn to use the *,^, and $ wildcard selectors for classes and id.

Contains (*=) wildcard selector in CSS

The contains (*=) wildcard selector allows developers to find all HTML elements whose attribute value contains the ‘string’ as a substring. For example, using the ‘*’ wildcard selector with the class finds all HTML elements whose class name contains the string.

Syntax

Users can follow the syntax below to use the contains (*) wildcard selector for classes.

The above syntax selects all HTML elements containing the ‘string’ as a substring in the class name.

Example

In the example below, we have created the four different div elements and added the texts inside that according to its class name. In CSS, we have used the ‘contains’ wildcard selector to select all div elements whose class name contains the ‘test’ as a substring.

In the output, users can observe the colour of the first two div element’s texts is red as it contains the class name with the ‘test’ substring.

   [class*="test"]  
Using the contains (*=) wildcard CSS selector in CSS.
 
This is a text with the class name test1.
 
This is a text with the class name sampletest.
 
This is a text with the class name demo test.
 
This is a text with the class name element.
   

Starts with (^=) wildcard selector in CSS

The starts with (^=) wildcard selector allows us to select all HTML elements whose attribute value starts with the particular substring.

Syntax

Users can follow the syntax below to use the starts with wildcard selector for classes.

The above syntax selects all HTML elements whose class name starts with the ‘string’.

Example

In the example below, we have used the starts with (^=) wildcard CSS selector with the class to select elements based on the class name.

In the output, users can observe that the first and third div element’s text turns blue as it contains the ‘test’ string at the start. The second div element contains the ‘test’ in the class name, but it is at the end of the class name, so it is not selected by the starts with (^=) wildcard selector.

   [class^="test"]  
Using the starts with (^=) wildcard CSS selector in CSS
 
This is a text with the class name test1.
 
This is a text with the class name sampletest.
 
This is a text with the class name testdemo test.
 
This is a text with the class name element.
   

Ends with ($=) wildcard selector in CSS

The ends with ($=) wildcard selector selects all HTML elements if a particular attribute value contains the substring at the end. For example, if the class names of two different elements are ‘onestart’ and ‘lastone’, and the substring is ‘one’, it will select an HTML element with only the ‘lastone’ class name as it contains the one substring at the end.

Syntax

Users can follow the syntax below to use the ends with ($=) wildcard CSS selector for classes.

The above syntax selects all HTML elements whose class name ends with the ‘string’ substring.

Example

In the example below, 2 nd and fourth div elements contain the ‘test’ substring at the end in the class name value. We have used the ends with ($=) wildcard CSS selector to select both div elements and applied border, margin, and padding to them.

   [class$="test"]  
Using the ends with ($=) wildcard CSS selector in CSS.
 
This is a text with the class name test1.
 
This is a text with the class name sampletest.
 
This is a text with the class name testdemo test.
 
This is a text with the class name elementtest.
   

Example

In the example below, we use id with the ends with CSS selector rather than using the class as an attribute. It demonstrates how to use other attributes with the wildcard CSS selector to select HTML elements.

Here, we select all HTML elements whose id contains the ‘name’ at the end of its value and change font style and colour.

   [id$="name"]  
Using the ends with ($=) wildcard CSS selector in CSS.
 
firstname
 
lastname
 
age
 
namestart
   

Users learned to use the wildcard CSS selectors for classes. Users can use the contains (*=) CSS selector to get elements whose attribute value contains a substring in the middle, starts with (^=) CSS selector to get elements whose attribute value contains a substring in the start, and ends with ($=) for the end.

Also, users learned how to use wildcard CSS selector with other attributes such as an id in the last example.

Источник

Css class selector contains

It’s an attribute wildcard selector. In the sample you’ve given, it looks for any child element under .show-grid that has a class that CONTAINS span.,means that all child elements of ‘.show-grid’ with a class that CONTAINS the word ‘span’ in it will acquire those CSS properties., Talent Recruit tech talent & build your employer brand ,I saw this selector in Twitter Bootstrap:

So would select the element in this example:

You can also do searches for ‘begins with. ‘

which would work on something like this:-

Answer by Hamza Tran

The CSS attribute selector matches elements based on the presence or value of a given attribute.,Represents elements with an attribute name of attr whose value is exactly value.,Represents elements with an attribute name of attr.,Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

Answer by Molly Velasquez

Wildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard.,What is the use of asterisk (*) selector in CSS ?,Wildcard Selectors (*, ^ and $) in CSS for classes,CSS | Display property

[attribute*=”str”] Selector: The [attribute*=”str”] selector is used to select that elements whose attribute value contains the specified sub string str. This example shows how to use a wildcard to select all div with a class that contains str. This could be at the start, the end or in the middle of the class.
Syntax:

Answer by Wallace Boone

You can use an attribute selector where the attribute to be selected is class but must start with “icon” eg.,Look in to querySelectorAll() with the class/asterisk attribute selector advised above.,This will select all elements with a class beginning with icon. If you want to learn more, this could help: https://css-tricks.com/attribute-selectors/,[class*=”keyword”] would select al classes containing ‘keyword’ whether it’s first, last or part of a name….right?

I am attaching various icons to different li in an ul. I am doing this using the class method so for example

Answer by Mariam Maddox

Today we’ll cover simple CSS selectors, then more advanced, then pseudo-classes, which are essentially powerful, built-in matching functions that reduce a search to just what you are looking for.,Continuous TestingAutomate tests at every stage of the development cycle,CSS in Selenium has an interesting feature of allowing partial string matches using ^=, $=, or *=. I’ll define them, then show an example of each:,Automate tests at every stage of the development cycle

XPath: //div[@id='example'] CSS: #example

The previous example showed //div in the xpath. That is the element type, which could be input for a text box or button, img for an image, or «a» for a link.

XPath: //div[@class='example'] CSS: .example

This is useful for navigating lists of elements, such as forms or ul items. The next sibling will tell selenium to find the next adjacent element on the page that’s inside the same parent. Let’s show an example using a form to select the field after username.

Let’s write an XPath and css selector that will choose the input field after “username”. This will select the “alias” input, or will select a different element if the form is reordered.

XPATH: //input[@id='username']/following-sibling:input[1] CSS: #username + input

We can easily select the username element without adding a class or an id to the element.

XPATH: //input[@name='username'] CSS: input[name='username']

We can even chain filters to be more specific with our selectors.

XPATH: //input[@name='login'and @type='submit'] CSS: input[name='login'][type='submit']

CSS selectors in Selenium allow us to navigate lists with more finesse than the above methods. If we have a ul and we want to select its fourth li element without regard to any other elements, we should use nth-child or nth-of-type. Nth-child is a pseudo-class. In straight CSS, that allows you to override behavior of certain elements; we can also use it to select those elements.

If we want to select the fourth li element (Goat) in this list, we can use the nth-of-type, which will find the fourth li in the list. Notice the two colons, a recent change to how CSS identifies pseudo-classes.

CSS: #recordlist li::nth-of-type(4)

On the other hand, if we want to get the fourth element only if it is a li element, we can use a filtered nth-child which will select (Car) in this case.

CSS: #recordlist li::nth-child(4)

Note, if you don’t specify a child type for nth-child it will allow you to select the fourth child without regard to type. This may be useful in testing css layout in selenium.

CSS in Selenium has an interesting feature of allowing partial string matches using ^=, $=, or *=. I’ll define them, then show an example of each:

^= Match a prefix CSS: a[id^='id_prefix_']

A link with an “id” that starts with the text “id_prefix_”

$= Match a suffix CSS: a[id$='_id_sufix']

A link with an “id” that ends with the text “_id_sufix”

*= Match a substring CSS: a[id*='id_pattern']

Источник

Class selectors

The CSS class selector matches elements based on the contents of their class attribute.

Syntax

.class_name  style properties > 

Note that this is equivalent to the following attribute selector :

[class~=class_name]  style properties > 

Examples

CSS

.red  color: #f33; > .yellow-bg  background: #ffa; > .fancy  font-weight: bold; text-shadow: 4px 4px 3px #77f; > 

HTML

p class="red">This paragraph has red text.p> p class="red yellow-bg"> This paragraph has red text and a yellow background. p> p class="red fancy">This paragraph has red text and "fancy" styling.p> p>This is just a regular paragraph.p> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 22, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник