Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by EMMANUEL GENARD
EMMANUEL GENARD
3,790 Points

Question about Attribute Selectos

Hey,

I'm going over the CSS Deep Dive second edition and I've noticed two attribute selectors that seem to do the same thing.

It seems to me that

[class*="stuff"]

and

[class~="stuff"]

Select the same thing

Is there a difference between? If yes, what is it?

2 Answers

Jafet Solorio
Jafet Solorio
2,060 Points
Jafet Solorio
Jafet Solorio
2,060 Points

if i'm correct * means universal as in the entry html structure and ~ means a word that can either be stuff or stuff_fun

EMMANUEL GENARD
EMMANUEL GENARD
3,790 Points
EMMANUEL GENARD
EMMANUEL GENARD
3,790 Points

I found the answer to this on css-tricks.com

Your right that * is a the universal selector but I think it means something else when it is used in an attribute selector, meaning the value specified between the quotes can be found anywhere in the value of the attribute in the HTML. While when it is ~= the value you write has to be one value in a space separated list of words.

So when I the css

[class*="shoe"]

This will select any HTML element which has been given a class attribute that contains the string "shoe" anywhere in its value. For instance:

<p class="myshoe"> <p class="shoe"> <p class="shoe that is mine">

Will all be selected

While with this bit of css

[class~="shoe"]

The only of the above that will be selected is <p class="shoe that is mine">because shoe is one of the values in a space separated list of words

Hope this Helps

had to edit because I don't know what Markdownis and I tried to use <code></code> and that did not work but the cheatsheet link at the bottom of this editing box just links back to the original post and I had to google it.