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

James Page
James Page
9,621 Points
Posted by James Page
James Page
9,621 Points

The difference between * and ~ in attribute selectors

I don't quite understand the difference between the use of * and ~ in an attribute selector. Eg, [attribute*="string"] and [attribute~=string] sound like they achieve the same thing, reading this reference list: http://www.w3schools.com/cssref/css_selectors.asp

What am I misunderstanding?

4 Answers

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

Really not a fan of W3schools.

CSS Tricks has always been a much more clear and reliable source. Check out this post: http://css-tricks.com/attribute-selectors/

To paraphrase his answer in that page.

For ~= "You probably already knew that you could apply multiple classes to elements right? Well if you do that, you can still use .class-name in CSS to target any one of them. Attribute selectors aren't that easy. If your rel attribute has multiple values (e.g. values in a space separated list) you'll need to use "~=":"

For * = "This is where it starts getting more interesting. The equals sign in attribute selectors may be prefaced by other characters which alter the meaning a bit. For example, "* =" means "match the following value anywhere in the attribute value."

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

w3schools is generally not a reliable source of information check out w3fools.com for more info.

Instead you should be using htmldog.com as your primary reference source.

If you need to "check the manual", because you need more details that's what dochub.io is for.

James Page
James Page
9,621 Points
James Page
James Page
9,621 Points

If I've understood the CSS Tricks page correctly:

[attribute*="string"] targets any attribute values with string as an instance.

[attribute~="string1 string2 string3"] targets attribute values with those strings listed - do all values have to be present, or is it targeting any of them?

Kevin Korte
Kevin Korte
28,148 Points
Kevin Korte
Kevin Korte
28,148 Points

With the ~= I do not believe you can have more than one attribute selector in it. I don't believe it will work to choose all three strings inside of it. But there would be other selectors and ways to target all 3 strings if you needed to do so, and CSS's cascading effect would help you make that selection.

But to answer your question. Let's say you had [attribute~="string1"] with some CSS rules, than it will target any attribute that has exactly "string1" as a selector, where there are multiple selectors.

Where would this come in handy? Using CSS to style a group of objects, and than using this selector to very specifically pick out one item.

I'm a visual guy, so take a look at this to see if it doesn't make sense. Notices how close the classes are, but what gets picked out of the CSS.

http://codepen.io/seraphzz/pen/whkog

For the attribute selector * =, if it were set to "string" it will select any attribute that matches where the letters "string" are, regardless of if there are letters before it or after.

Take a look at this. Hover over the boxes to see how their individual style is overridden by an attribute selector, and which elements received the new hover style, and which ones didn't.

http://codepen.io/seraphzz/pen/fyoFA