Set The Same Value to Multiple Properties (CSS)

Set the same value to multiple properties (CSS)

Nope. But for your example, you can do this:

border: solid #E2E2E2;
border-width: 0 1px;

The attributes where there can be separate values for top, right, bottom, and left (eg, border-*, margin, padding) can usually be combined in a single attribute.

Is there a way to assign the same value to 2 css properties at once?

You can't do this with CSS.

The easiest way to do this is use a variable. Here's how you'd do that in LESS

@color: red;
.demo {
  background-color: @color;
  color: @color;
}

and the same thing in Sass

$color: red;
.demo {
  background-color: $color;
  color: $color;
}

But you can also achieve the power you want. Here's one way you could do it in LESS:

.properties(@properties, @value, @i: 0) when (@i < length(@properties)) {
  @property: extract(@properties, @i + 1);   // get the property
  @{property}: @value;                       // write the style
  .properties(@properties, @value, (@i + 1)) // loop
}

.demo {
  @props: background-color, color;
  .properties(@props, red)
}

will compile to your desired

.demo {
  background-color: red;
  color: red;
}

How's it work?

.demo calls the .properties parametric LESS mixin, passing a list (sometimes called an array in other SO questions about CSS/etc) of properties (.properties's @properties parameter; in this example, @props) and the value to assign to all of them (.properties's @value parameter; in this example, red).
note that .properties has a counter parameter @i with a default value of 0.
.properties has a LESS CSS guard that checks to see if @i is less than the number of properties it was passed (held in @properties). It is! (@i is 0, and the properties' list is certain to be at least 1) Okay, so we're allowed past the guard.
Get the name of the property: use LESS's extract() on the first item in the list (we need to say @i + 1 because we started the @i counter at 0. we could have also started @i at 1, and guarded with when (@i < (length(@properties) + 1)) but that's harder to read)
At last: write the style. interpolate the variable holding the property name (@property) as a string (@{property}), and give it the value we originally passed to .properties in .demo (@value)
LESS loop! Run .properties again, but advance the counter @i one: .properties(staysTheSame, staysTheSame, (@i + 1))
.properties will run until it's looped through all the items in its @properties list. After that, @i will equal length(@properties), so we won't pass the when (@i < length(@properties)) guard.

Note that @props could be defined within .test, as above, or anywhere where .test will have access to it, and same for the value. You might end up with

@props: background-color, color;
@val: red;
@val2: green;
.properties {...}
.demo {
  border-color: @val2;
  .properties(@props, @val)
}
.demo2 {
  .properties(@props, @val2)
}

How to set multiple properties in CSS?

You're really, really close. Try

MyLineEdit[style="Normal"][noFrame="true"]:disabled
{
  border: none;
  background: gray;
}

From the CSS2 docs (which Qt StyleSheets supports):

Multiple attribute selectors can be used to refer to several attributes of an element, or even several times to the same attribute.

Here, the selector matches all SPAN elements whose "hello" attribute has exactly the value "Cleveland" and whose "goodbye" attribute has exactly the value "Columbus":
span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Where in the CSS specs does it say how multiple properties with the same name should be handled?

To answer my own question – I realised I should probably look for the answers to the two sub-questions "which out of two declarations wins" and "what should it do about invalid declarations".

For the former, https://www.w3.org/TR/css-cascade-3/#cascade-order says

The last declaration in document order wins.

which I take to mean that out of two property-value declarations with the same property, the last one wins.

And for the latter, https://www.w3.org/TR/css-cascade-3/#w3c-partial says

user agents must not selectively ignore unsupported component values and honor supported values in a single multi-value property declaration: if any value is considered invalid (as unsupported values must be), CSS requires that the entire declaration be ignored.

which I take to mean that if a browser e.g. doesn't support image-set in the question's example, it will ignore that entire declaration.

Can I set multiple values of the same CSS property with Javascript?

One way I have seen is to simply test whether the an assignment of the values was successful. If you assign a value the browser doesn't understand, it simply ignores it. For example in webkit:

> d = document.createElement('div')
  <div></div>
> d.style.cursor = '-moz-grab';
  "-moz-grab"
> d.style.cursor
  ""

So you can use that behavior to roll your own function:

var setVendorStyle = (function() {
    var vendor_prefix = ['-moz-', '-webkit-'];
    return function(element, prop, value) {
        // try unmodified value first
        element.style[prop] = value;
        if (element.style[prop] === value) {
           return value;
        }
        // try vendor prefixes
        for (var i = 0, l = vendor_prefix.length; i < l; i++) {
           var vendor_value = vendor_prefix[i] + value;
           element.style[prop] = vendor_value;
           if (element.style[prop] === vendor_value) {
              return vendor_value;
           }
        }
        return false; // unsuccessful
    };
}());

Usage:

setVendorStyle(element, 'cursor', 'grab');

This probably won't work for every CSS property, especially not with shorthands, but hopefully for the ones with simple values.

Multiple values for same css attribute

The only rule that applies is cascading, which works the same way even for elements that have multiple classes which are all matched by individual class selectors.

Namely if you have CSS as follows:

.c1 { display: inline-block; }
.c2 { display: none; }

... where the selectors .c1 and .c2 have the same specificity, then the display declaration that comes last will take precedence, even when the same element has both classes.

Note that since the element has both classes, it will still match both rules, so any properties that don't overlap will still apply as normal:

.c1 { display: inline-block; font-weight: bold; }
.c2 { display: none; color: red; }

In this example the element will have bold and red-colored text, but its display will resolve as none.

Set multiple values for one css attribute

You can use a class instead

function updateHeight() {  var testElem = document.getElementById("testId");  testElem.classList.add('high');}

#testId {  height: 8em;  height: 8rem;  background-color: black;  color: white;}
#testId.high { /* remember that ID is more specific than class */  height: 12em;  height: 12rem;}

<!DOCTYPE html><html>
<head>  <title>Test</title>  <meta charset="utf-8" /></head>
<body>  <div id="testId">    BlaBla  </div>  <button onclick="updateHeight()">Bla</button></body>
</html>

Pass multiple property names, values and set them using one mixin. Is it possible?

For this case, you can use looping and array list like in the below snippet. As you can notice, the input parameters are all arrays instead of having just a single value. Within the mixin, we can use extract function to extract the property, its color value and alpha based on the index and then use the loops to create the properties.

Note: I didn't understand why you need those guards with the .mixin() because all cases seem to be setting the same property and output. So, I have removed it in the below snippet.

I have done the changes only for one mixin (.greyMixin) but you can do the same for the other mixin also.

.formater(@className; @rules){
    .@{className}{
        @rules();
    }
}
.greyMixin(@properties; @g; @a:1){
  @propCount: length(@properties);
  .loop-properties(@index) when (@index > 0){
    @property: extract(@properties, @index);
    @col: extract(@g, @index);
    @alpha: extract(@a, @index);
    @rgba: rgba(@col,@col,@col,@alpha);
    @{property}:@rgba;
    .loop-properties(@index - 1);
  }
  .loop-properties(@propCount);
}
.formater(colourclass;{
    .greyMixin(color, background;25, 110;1, 0.8);
});

Set The Same Value to Multiple Properties (CSS)