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>
Related Topics
CSS Variables (Custom Properties) in Pseudo-Element "Content" Property
How to Check for Duplicate CSS Rules
Box-Shadow and Border-Radius Bug in Chrome
Scale HTML Table Before Printing Using CSS
How to Use Svg Sprite Sheet as CSS Background-Image While Maintaining Aspect Ratio and Scalability
Responsive Images Positioned Over Image
@Font-Face Declarations Don't Work in Android 4.3 Internet Browser
Css3 Radial Gradients with Rgba()
Vertical Alignment of Text in Container: Webkit VS Firefox
Font-Size:62.5% VS. Font-Size:10Px
Display Bootstrap Popovers Outside Divs with Overflow:Hidden
Hovering Over CSS Transition in Safari Lightens Certain Font Color
Show/Hide Div Based on Browser Size Using Only CSS