What does the css "[class * = my-class] .my-subclass" do?

Question

I inherited some css, and I searched everywhere on the Internet to understand what is expressed by a css block that looks like this:

[class*=wrapper] .logo { padding-top: 32px !important; } 

What is an asterisk and square brackets?

It's hard to find [and * on google ... Sorry if the question is dumb.

Answer 1

He selects an element with the logo class that has an ancestor with wrapper somewhere in its class attribute. For example, note that the burgerwrapper class also leads to the selection of the item below.

 [class*=wrapper] .logo { color: #f99; } 

 <div class="logo">Not selected</div> <div class="wrapper"> <div class="logo"> Selected </div> </div> <div class="burgerwrapper"> <div class="logo"> Selected </div> </div> 

See http://css-tricks.com/attribute-selectors/ for some background information on attribute selectors.

Answer 2

what square brackets do

Attribute selectors

CSS 2.1 allows authors to specify rules that correspond to elements that have specific attributes defined in the source document.

W3 attribute selectors

What is an asterisk?

Substring Match Attribute Selectors

[att * = val] Represents an element with the attribute att whose value contains at least one instance of the substring "val". If "val" is an empty string, then the selector does not represent anything.

Adjustment Match Attribute Selectors

To summarize in your example:

 [class*=wrapper] .logo { color: red; } 

 <div class="wrapper"> <div>not this</div> <div class="logo">this</div> <div class="logo">this</div> </div> <div> <div>not this</div> <div class="logo">not this</div> <div>not this</div> </div> 

Select children with the .logo class .logo that their parent has an attribute class with a wrapper value, somewhere in that attribute.