1

I just saw this code.

.link--icon [class*='text'] {
    padding-left: 8px;
}

What does this line .link--icon [class*='text'] exactly mean?

Krunal V
  • 1,255
  • 10
  • 23
user1941537
  • 6,097
  • 14
  • 52
  • 99
  • 1
    It matches any element which has the string `"text"` anywhere in its `class` attribute and has an ancestor with class `link--icon`. So it will match `.link--icon .text` as well as `.link--icon .contextuality`. It won't match `.link--icon .Text` (it's case sensitive). – tao Apr 11 '19 at 11:25

4 Answers4

7

It is an attribute wildcard selector. It looks for a child element under .link--icon whose class name contains "text".

Example:

div[class*="test"] {
    background: #ffff00;
}

<div class="first_test">The first div element.</div>
<div class="second">The second div element.</div>
<div class="test">The third div element.</div>
<p class="test">This is some text in a paragraph.</p>

Here we have three divs, two divs' classes contain the "test" keyword, so those divs' background is set to "#FFFF00". The middle div doesn't, and the p element doesn't match the div rule, so those are not affected.

Refer to this w3schools snippet and this question.

theberzi
  • 2,142
  • 3
  • 20
  • 34
Deepak
  • 1,373
  • 2
  • 10
  • 31
0

.link--icon [class*='text'] -> Selects every child element of the elements with class link--icon, whose class attribute value contains the substring text.

Bart Hofland
  • 3,700
  • 1
  • 13
  • 22
mindmaster
  • 1,828
  • 12
  • 22
0

The [class*='text'] selector combines descendant and attribute selectors, and matches any element that has the class"text" set (for example: <p class="text">) and * is a wildcard that matches any element.

ScottieG
  • 318
  • 2
  • 16
0

It means that the specified style will be applied to every element that has any class that contains "text" and is a child of an element with "link--icon" defined at the class attribute.

.class: selector for elements by class

[class*='text'] wild card class selector for elements whose defined class contains the substring 'text'

Example:

I have the following elements

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

If I use the following selector in a css rule: input[name*='man']

I will apply the rule to the following elements:

<input name="man-news">
<input name="milkman">
<input name="letterman2">

CSS3 attribute selectors

W3 CSS Selectors

LucasNesk
  • 183
  • 8