What is this CSS selector class span

Question

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

User · Answer

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    lt div class  show-grid  gt     lt div class  span  gt  span lt  div gt     lt div class  span6  gt span6 lt  div gt     lt div class  attention-span  gt attention lt  div gt     lt div class  spanish  gt spanish lt  div gt     lt div class  mariospan  gt mariospan lt  div gt     lt div class  espanol  gt espanol lt  div gt      lt div gt       lt div class  span  gt  span lt  div gt     lt  div gt      lt p class  span  gt span lt  p gt     lt span class  span  gt I do GET HIT lt  span gt      lt span gt I DO NOT GET HIT since I need a class of  span  lt  span gt   lt  div gt    lt div class  span  gt I DO NOT GET HIT since I m outside of  show-grid lt  span gt    All of the elements get hit except for the  lt span gt  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

User · Answer

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  lt strong gt  element in this example    lt div class  show-grid  gt       lt strong class  span6  gt Blah blah lt  strong gt   lt  div gt    You can also do searches for  begins with      div class   something         which would work on something like this -   lt div class  something-else-class  gt  lt  div gt    and  ends with      div class   something         which would work on   lt div class  you-are-something  gt  lt  div gt    Good references   CSS3 Attribute Selectors  Substring Matching The 30 CSS Selectors you Must Memorize W3C CSS3 Selectors

User · Answer

It selects all elements where the class name contains the string  quot span quot  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

User · Answer

show-grid  class   quot span quot    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

[css] What is this CSS selector? [class*="span"]

Examples related to css

Examples related to css-selectors