223

I saw this selector in Twitter Bootstrap:

.show-grid [class*="span"] {
    background-color: #eee;
    text-align: center;
    border-radius: 3px;
    min-height: 30px;
    line-height: 30px;
}

Does anyone know what this technique is called and what it does?

Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
jon
  • 5,961
  • 8
  • 35
  • 43

5 Answers5

377

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

isNaN1247
  • 17,793
  • 12
  • 71
  • 118
  • 1
    I know this is old answer but I would add this reference to reference list: http://www.w3.org/TR/css3-selectors/ – Dread Boy Apr 17 '15 at 18:39
  • 2
    Would like to add another reference just in case people find this useful: http://AllCssSelectors.com – user3339411 Jul 07 '15 at 05:44
  • 9
    The `div[class^="something"] { }` "starts with" selector only works if the element contains one single class, or if multiple, when that class is the first one on the left. – Nahn Jan 08 '16 at 17:01
  • 2
    I would add `div[class~="something"]` for finding matches in space separated lists (e.g. classes) and `div[class|="something"` for matching on a hyphen separated list e.g. matching something in you-are-something classname above – Ruskin Feb 07 '17 at 18:23
  • @user3339411 The website is offline so I'm posting an archived version. https://archive.is/FOUHa – desbest Jan 01 '21 at 05:00
33
.show-grid [class*="span"]

It's a CSS selector that selects all elements with the class show-grid that has a child element whose class contains the name span.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Spikeh
  • 3,540
  • 4
  • 24
  • 49
  • 17
    actually, it selects the "child element who's class contains the name span" and **not** "all elements with the class show-grid" – Utopik Apr 12 '14 at 15:51
  • 1
    This does not select elements with the class `show-grid`. It selects the descendants (not just children) of those elements having a class name containing "span". It may sound pedantic but it's an important logical distinction. – isherwood Dec 31 '20 at 17:44
7

The Following:

.show-grid [class*="span"] {

means that all child elements of '.show-grid' with a class that CONTAINS the word 'span' in it will acquire those CSS properties.

<div class="show-grid">
  <div class="span">.span</div>
  <div class="span6">span6</div>
  <div class="attention-span">attention</div>
  <div class="spanish">spanish</div>
  <div class="mariospan">mariospan</div>
  <div class="espanol">espanol</div>

  <div>
    <div class="span">.span</div>
  </div>

  <p class="span">span</p>
  <span class="span">I do GET HIT</span>

  <span>I DO NOT GET HIT since I need a class of 'span'</span>
</div>

<div class="span">I DO NOT GET HIT since I'm outside of .show-grid</span>

All of the elements get hit except for the <span> by itself.


In Regards to Bootstrap:

  • span6 : this was Bootstrap 2's scaffolding technique which divided a section into a horizontal grid, based on parts of 12. Thus span6 would have a width of 50%.
  • In the current day implementation of Bootstrap (v.3 and v.4), you now use the .col-* classes (e.g. col-sm-6), which also specifies a media breakpoint to handle responsiveness when the window shrinks below a certain size. Check Bootstrap 4.1 and Bootstrap 3.3.7 for more documentation. I would recommend going with a later Bootstrap nowadays
Tyler
  • 1,762
  • 2
  • 15
  • 8
4

It selects all elements where the class name contains the string "span" somewhere. There's also ^= for the beginning of a string, and $= for the end of a string. Here's a good reference for some CSS selectors.

I'm only familiar with the bootstrap classes spanX where X is an integer, but if there were other selectors that ended in span, it would also fall under these rules.

It just helps to apply blanket CSS rules.

isherwood
  • 58,414
  • 16
  • 114
  • 157
Kevin Li
  • 1,540
  • 2
  • 17
  • 23
0

In my case I'm unable to apply background color for class due to dynamic change of class name with numbers

Ex:

Issue:

body .ForwardRef-root-198 .aura-ag-grid .ag-row:hover, body .ForwardRef-root-198 .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

Solution:

body div[class*="ForwardRef-root-"] .aura-ag-grid .ag-row:hover, body div[class*="ForwardRef-root-"] .ag-details-grid .ag-row:hover {
    background-color: #2196f35c !important;
}

Reference: link

KARTHIKEYAN.A
  • 18,210
  • 6
  • 124
  • 133