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 Mark Cuda
Mark Cuda
6,428 Points

Interesting way of using substring selectors

I just thought this might be a really cool thing to add in. I haven't dived deep enough to know the semantic ramifications of this bit of code, but I thought it was cool.

I thought to myself, "wouldn't it be cool if I could create arbitrary html element attributes that can be controlled via CSS?"

Example. Imagine if I wanted to control the color of text simply because that block of content to be "categorized" as marketing copy. So in my html I write...

<li cat="marketing">Marketing</li>

(In this case, it's an li element.)

And than my CSS reads:

li[cat*="marketing"] {
  color: tomato;
  border-color: black;;
}

With of course that custom "cat" or category attribute I created.

I've written some HTML/CSS and a bit of JS and PHP for years, but treehouse is helping me dive further. This may be a semantic nightmare, but I thought it was cool nonetheless... I read about CSS3 almost including the ability to target the CONTENT of html elements via these substring selectors, but it didn't make the cut...I figured this is the next best thing?

I'd love to hear some of the experts thoughts, and maybe even our buddy Guil! (Notice how I used Tomato just for you ;) )

Mark Cuda
Mark Cuda
6,428 Points

Guil Hernandez

Colin Marshall
Colin Marshall
32,861 Points

Hey Mark,

I fixed your code for you. To post code on the forum, wrap your code with 3 backticks (```) on the line before and after. If you specify the language after the first set of backticks, that will enable syntax highlighting.

Example:

```html

code goes here...

```

As for this strategy you thought of, I really like it. It might not be semantically correct, but I don't think it does much harm either. Sometimes your class attribute field on a tag can get pretty long and bloated, especially when you use BEM. I could see myself using something like this in place of modifier classes in BEM, because then I could move the modifier class to an attribute. This would separate the modifier from the list of classes which would make the html easier to read and understand, at least for myself.

I would love to hear what Guil has to say on this topic.

Mark Cuda
Mark Cuda
6,428 Points

Colin Marshall Sorry about that, my man!

You'd think with all the hours I've spent on StackOverflow I wouldn't forget something so silly like that. My mistake. Thanks for the fix. :)

I agree that when using a BEM strategy to write you HTML and CSS, it can get messy and bloated! That's why I thought this might be a cool way to trim back, and as Guil says, let CSS do some of the heavy lifting and keep it out of my DOM!

Thanks for the insight, your opinion is not only greatly valued by myself, but helpful and shows I'm at least not 100% crazy! :)

  • Mark

1 Answer

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Mark Cuda,

I like the way you think. :)

HTML5 is extensible so you could do this, but I don't recommend it. Besides the semantics, your markup can become difficult to deal with & comprehend depending on how many of these custom attributes you create.

I recommend using the more semantic data- attribute instead. For example:

<li data-cat="marketing">Marketing</li>

This way it's more descriptive. Hope this helps!

Mark Cuda
Mark Cuda
6,428 Points

Guil Hernandez Yes!! This is exactly the train of thought I had. I just figured there must be a more semantic way of doing it that I didn't know about.

Thanks so much!!

For anyone wondering, I found the MDN docs on this, I'll link it below. Great read. Thanks for the heads up, Guil!

MDN Data Attribute