Extended examples with Attribute Selectors

[MartinMuzatko]

Hi there!

Since were playing around with fruits and plates and similar (no real-life examples), I'd come up with attributes that would further describe the freshness of the fruits, or condition of the plates (broken?) to use together with attribute selectors.

A few Examples

plate[condition=broken]
Attribute equals exact value

milk[condition*=spoiled] Attribute contains value somewhere

apple[condition^=rotten]
Attribute begins with value

Never used this selector, but why not include it?
bento[title$=sushi]
Attribute ends with value

There are still more.
A full list can be found here: http://css-tricks.com/attribute-selectors/
Something to add: Attributes tend to be not so visible on real-life examples. Other than data- attributes, which are processed per javascript. I came up with examples which could be visible, both in the markup and also on the table. The selectors can also be used with classes and IDs of course.

Cheers,
-Martin

[flukeout]

Hey @MartinMuzatko - these are really fun suggestions. I'm definitely going to tackle this selector type next. Before seeing this list my idea was to assign food to different people, like orders at a restaurant. There could be a little nametag in front of certain orders and I was thinking of using a customer or name attribute.

For example ``". This would also make it easy to take advantage of the 'contains' and 'starts with' selectors for people with the same first name, but different last names.

What do you think?

[MartinMuzatko]

Awesome! I love to see that you finally find some time to continue this awesome learning help.
Yes, assigning food to people would be a nice idea too, to make attributes visible. I'll think of a few more examples and post them here.

Again: Thanks for your time!

[flukeout]

@MartinMuzatko not sure if you've seen, but I introduced some attribute selector levels (27-32). If you have time to check them out, please do and let me know your thoughts.

[MartinMuzatko]

Awesome! Cool to see this finally implemented :)