What Is This CSS Selector? [Class*="Span"]

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 of product-price-on-sale instead has an id product-price, must be at this point:

    section#buy h2#product-price

  • Third part:

    span

    It's ok since the span element is inside the h2, but if you want to target the one with class product-price and on-sale your final selector must be:

    section#buy h2#product-price span.product-price.on-sale



Related Topics



Leave a reply



Submit