Advanced CSS Selector

[idesignstuff]

Hello all,
I was watching Episode #115 “Don’t Overthink it Grids” and around the 15 minute mark Chris uses a selector:

[class*=’col-‘]

He also uses this selector to adjust padding. This is not in the video but in the article

$pad

He uses this to taget everything that contains class col-. My question is what are these types of selector called? and more importantly where can I learn more about them? I’ve done some searches on the internet and can’t seem to find any articles related them.

Thanks a million for helping out an aspiring Front End Developer

Cheers

[Paulie_D]

They are attribute selectors.

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

[idesignstuff]

Thank you that is exactly what I was looking for! Thank you very much.

I tried using the [class*=’col-‘] selector in a gird framework but am having trouble getting it to work. Am I making a mistake in the code?

http://cdpn.io/vpcIb

[Kitty Giraudel]

Yes. You used div[class*='.col-'] { ... } instead of div[class*='col-'] .

Edit: I think it worth pointing out that attribute selectors can be pretty heavy even if they can be handy.

[idesignstuff]

Thank you so much! That was driving me crazy, I didn’t notice I had the period in front of col.

[Author]

Posts