Using class name in CSS value

Question

I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.

var el = document.querySelectorAll('span[class^=impact]')[0],
  col = el.className.split('-')[1];

el.style.textShadow = '2px 2px 0 #' + col;

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background-image: url('http://i.imgur.com/UxB7TDq.jpg');
}
[class^=impact] {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  font-family: Impact, sans-serif;
  font-size: 72pt;
  font-weight: 800;
  text-transform: uppercase;
}

<span class="impact-008080">impact</span>

As you can see I'm basically getting the first half of the class and applying styles to it and grabbing the second half of the class in JavaScript and applying the shadow then. What I want to do is omit the JavaScript completely and keep it all in CSS.

I do not have a list of colours. Any and all hex colours are supported obviously. I would prefer to keep this format.

@Harry no, I should have mentioned that. I would really like to keep it in this format as well. — Spedwards
– Spedwards, Commented Sep 25, 2014 at 4:29
In that case I think it would be really tricky (and not to forget a hugely bloated file) to do it with CSS/Less. I am not much into SASS but I would assume the same applies for it too. — Harry
– Harry, Commented Sep 25, 2014 at 4:31
@serakfalcon Because how would I select the colour class? There are 16581375 possible hex colours. — Spedwards
– Spedwards, Commented Sep 25, 2014 at 4:56
If you want to embed your styling in your HTML, just use the style attribute. Don't fool yourself into thinking your doing anything better by using embedding it in either the class attribute or a data-* attribute. — Alohci
– Alohci, Commented Sep 25, 2014 at 6:45

cimmanon · Accepted Answer · 2016-03-23 13:40:55Z

CSS `attr`

Theoretically, this type of thing is what the CSS attr property could be used for when browser support exists. Note that this won't work now, but when browser support does exist, it might look something like this:

HTML

<span class="impact" data-shadow="#008080">Impact</span>

CSS

.impact {
    /* you text and positioning styles here */

    text-shadow: 2px 2px attr(data-shadow);
}

You can read more about the attr property here: https://developer.mozilla.org/en-US/docs/Web/CSS/attr

But for now...

Your best bet is probably to continue to use JavaScript, but instead of appending the hex code to the class name, store the hex value in a data attribute of the element, allowing you to keep the class name consistent for all instances of that element.

HTML

<span class="impact" data-shadow="#fff">Impact</span>

CSS

.impact {
    /* your text and position styles here */
}

JS

var el = document.querySelector(".impact"),
    shadow = el.dataset.shadow;

el.style.textShadow = '2px 2px ' + shadow;

Here's a JSFiddle for reference: http://jsfiddle.net/galengidman/xx6r1n2o/

Collectives™ on Stack Overflow

Using class name in CSS value

1 Answer 1

CSS `attr`

But for now...

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

CSS attr

But for now...

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

CSS `attr`