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
CSS input[class*= span ]
What it means it will select any input which has a class which includes the string "span" ANYWHERE in the class name. Such as:
<input class="span" type="text" value="span" />
<input class="span-3" type="text" value="span-3" />
<input class="span-six" type="text" value="span-six" />
<input class="myspan" type="text" value="myspan" />
Codepen EXample
Can I write a CSS selector selecting elements NOT having a certain class or attribute?
Typically you add a class selector to the :not()
pseudo-class like so:
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}
But if you need better browser support (IE8 and older don't support :not()
), you're probably better off creating style rules for elements that do have the "printable" class. If even that isn't feasible despite what you say about your actual markup, you may have to work your markup around that limitation.
Keep in mind that, depending on the properties you're setting in this rule, some of them may either be inherited by descendants that are .printable
, or otherwise affect them one way or another. For example, although display
is not inherited, setting display: none
on a :not(.printable)
will prevent it and all of its descendants from displaying, since it removes the element and its subtree from layout completely. You can often get around this by using visibility: hidden
instead which will allow visible descendants to show, but the hidden elements will still affect layout as they originally did. In short, just be careful.
CSS Selector for matching substring
This code should select what you want by combinign the "begins with" and "ends with" wildcarding:
span[label^='./cakes/item'][label$='/./linkText']
unable to target specific css class
A few problems with your selector:
section#buy h2.product-price-on-sale span
First part:
section#buy
It's ok assuming you have an extra wrapper with id
buy
<section id="buy">
Second part
h2.product-price-on-sale
Wrong since element
h2
doesn't have a classname ofproduct-price-on-sale
instead has an idproduct-price
, must be at this point:section#buy h2#product-price
Third part:
span
It's ok since the
span
element is inside theh2
, but if you want to target the one with classproduct-price
andon-sale
your final selector must be:section#buy h2#product-price span.product-price.on-sale
Related Topics
Pure CSS Multiple Stacked Position Sticky
What's the Maximum Pixel Value of CSS Width and Height Properties
How to Select the Last N Items with Nth-Child
Changing an Input's HTML5 Placeholder Color with CSS Does Not Work on Chrome
Are Alternate Nested Styles Possible in CSS
First-Child Full-Width in Flexbox
How to Create Fluid Trapezoid Image with CSS
Why Doesn't Min() (Or Max()) Work with Unitless 0
Proper SCSS Asset Structure in Rails
Css3 Transform Order Matters: Rightmost Operation First
Text-Overflow Ellipsis on Flex Child Not Working
Display Image at 50% of Its "Native" Size
How to Get the Height of an Element Using CSS Only
Can You Target an Element with CSS Only If 2 Classes Are Present