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>
</div>

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>

<table>

  <tr class="ms-WPHeader">

    <td colspan="3">

      <div class="ms-WPTitle">

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

      </div>

    </td>

  </tr>

</table>

<table>

  <tr class="ms-WPHeader">

    <td colspan="3">

      <div class="ms-WPTitle">

        <span>I am visible though</span>

      </div>

    </td>

  </tr>

</table>

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

This

span[id='nav-cart-count'].nav-cart-count

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

span[id='nav-cart-count'][class='nav-cart-count']

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

span[id='nav-cart-count'].nav-cart-count

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

span[id='nav-cart-count'][class*='nav-cart-count']

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:

document.querySelectorAll('span.test').forEach(

  span =>

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

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

      span.classList.toggle('on')

  })

)

.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>