CODEWITHSUNDEEP
csscss-selectors
Adam Waite
Adam Waite

Reputation: 18855

What does this mean: body[data-page~='hello'], in CSS3?

In CSS3, what is the difference between:

body[data-page~='hello'] {

}

and

body[data-page='hello'] {

}

I have seen that the ~ is known as the general sibling combinator, http://css-tricks.com/child-and-sibling-selectors/ but I don't understand it in the context above.

Thanks.

Upvotes: 3

Views: 1187

Answers (1)

Michael Liu
Michael Liu

Reputation: 55499

From the CSS3 specification:

[att=val]: Represents an element with the att attribute whose value is exactly "val".

[att~=val]: Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

Thus <body data-page="hello world"> will be matched by the first rule but not the second.

Upvotes: 14

Related Questions