What Does the Selector [Class^="Span"] Do

What is this CSS selector? [class*= span ]

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.

So would select the <strong> element in this example:

<div class="show-grid">
<strong class="span6">Blah blah</strong>

You can also do searches for 'begins with...'

div[class^="something"] { }

which would work on something like this:-

<div class="something-else-class"></div>

and 'ends with...'

div[class$="something"] { }

which would work on

<div class="you-are-something"></div>

Good references

  • CSS3 Attribute Selectors: Substring Matching
  • The 30 CSS Selectors you Must Memorize
  • W3C CSS3 Selectors

What is the CSS syntax for a named span class nested in a div?

div span.name { ... }

div .. tells the element type

a space then span .. tells to look at span elements in sub levels

.name .. tells to look at those elements with css class named name

How to select a span with a text inside a div using CSS?

You can use :contains to neglect the inability of CSS to select text node.

Below there are two tables in which the second table text is visible.

$(".ms-WPHeader:contains('Text-Social Notification Properties')").css("display", "none");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<tr class="ms-WPHeader">

<td colspan="3">

<div class="ms-WPTitle">

<span>Text-Social Notification Properties</span>






<tr class="ms-WPHeader">

<td colspan="3">

<div class="ms-WPTitle">

<span>I am visible though</span>





How to write css selector for this span _ngcontent-eyw-6= A /span

Using xpath with h2:

//h2[contains(@class, 'label-top')]//span[contains(text(), 'A')]

Or without h2

//span[contains(text(), 'A')]

Or you can do it with CSS but without containing text

"h2.label-top span"

Checkout this XPath Cheat sheet

Why an expression with operator AND doesn't work in css selector



expression means literally, that we are locating span element with id attribute value equals to nav-cart-count and it has class nav-cart-count.

The second expression


means span element with id attribute value equals to nav-cart-count and class attribute value equals to nav-cart-count.

So, in case this span element has class attribute value like following: nav-cart-count counter the first locator expression will match it while the second will not!

To match both cases you can use the first expression


or the second expression can be modified to search for contains instead of equals, like this:


How to select a span with multiple classes and placed inside an anchor?

Multiple classes should be selected like this:

$('span.c3.c4').parents('a').click(function (e) { alert("clicked!"); });

See a working demo here > http://jsfiddle.net/JeG3A/

Targeting an element using a selector from another element

You can use attribute selector to select aria-expanded value and sibling selector to select your matexcerpt class.

button[aria-expanded="true"] + .projectmargin .matexcerpt {
display: none;

button[aria-expanded="false"] + .projectmargin .matexcerpt {
display: block;

From the above method, you can do with CSS. You can also do with JavaScript.

That depends on your aria-expanded value, if you can change value dynamically by JavaScript, You need to use JavaScript for that but if you have different component for aria-expanded values, CSS is the best option.

Is there a way to use variable CSS selector which can selectively apply css to html element which has classes which is a variable?

You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:


span =>

span.addEventListener('click', () => {

console.log(`you clicked ${span.innerText}`)



.test {

background: red;

color: white;

display: inline-block;

padding: 40px;


.test.on {

background: green;

<span class="test">foo</span>

<span class="test">bar</span>

<span class="test">baz</span>

Related Topics

Leave a reply