Question 45894 in CSS Question posted in
Some basic documentation can be found here.

can i style an element if universal selector has particular property-value combination? – CSS

It’s specifically for text-spacing styling. I want to set the element to auto height/width of the letter-spacing/word-spacing has some specific value.

HTML

<span class="subjectText">this is the text</span>

universal selector

*{
  letter-spacing:1.641px;
}

desired styling

*[style*="letter-spacing:1.614px"] .subjectText{
     background-color:yellow;
}

I tried below,but its not working

*[style*="letter-spacing:1.614px"] .subjectText{
     background-color:yellow;
}
Tags:

2

Answers


  1. 0

    The CSS selector will select any element with a style attribute containing the value "letter-spacing:1.614px" and any descendant with the class .subjectText. However, it won’t work in your case because the style attribute is not defined on the span element itself, but rather on the universal selector.

    you can define a separate class for the letter-spacing and apply it to the parent element of the text:

    .text-spacing {
  letter-spacing: 1.641px;
}

.text-spacing > .subjectText {
  background-color: yellow;
}
    Login or Signup to reply.
  2. 0

    UPDATED

    The short answer: Currently there is now way to test individual properties of defined CSS rules and use their value to define further CSS rules. Regardless whether they are defined with a universal or a specific selector, the CSS attribute selector mechanism simply does not incorporate testing for properties.

    A simple test shows that it will work for inline style attributes, but you need to add !important to the properties you want to override as inline style attributes (<tag style=".." />) have precedence over in document styles (<head><style>...</style></head>).

    In the current construction the ‘*’-universal selector is even [OPTIONAL] as the [attribute] selector rule is common enough.

    BE AWARE, though, that the CSS attribute rule [style*="..."] must exactly match the tags style="..." assignment. It will fail when not an exact match.

    /* Testing any CSS property will NOT work */
 *                       { color: orange }
[style*="color: orange"] { color: black }

/* Testing the inline 'style' attribute will work */
[style*="color: red"]   { color: black !important }
[style*="color: green"] { font-weight: bold; color: black }
[style*="color: blue"]  { color: black }

h3 { color: black }
    <h3>for this to work, '*'-universal selector in the CSS is not required:</h3>

<p>This is the first test line. It is 'orange' and will not become 'black' as the CSS required by OP does not work.</p><p style="color: red">This is a test line. It is 'red', but will become 'black' when CSS rule is successful.</p>
<p style="color: green">This is also a test line. It is 'green' and will become 'bold' as there is no inline `font-weight` setting, but not 'black' by lack of '!important'.</p>
<p style="color: blue">This is also a test line. It is 'blue' and will not become 'black' by lack of '!important'.</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search