CSS Selector Compare 2 Attributes

Specify multiple attribute selectors in CSS

Simple input[name=Sex][value=M] would do pretty nice. And it's actually well-described in the standard doc:

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; }

As a side note, using quotation marks around an attribute value is required only if this value is not a valid identifier.

JSFiddle Demo

Is there a way to check two different by.css() attributes in the same element() check in protractor?

Yes, just add a new condition in the square brackets:

div[data-row=1][data-col=1]

You can actually join the chain of selectors in a single selector:

$('div[data-row=1][data-col=1] .widget-toggle-btn').click();

$() is a shortcut to element(by.css()).

How can I make a CSS selector where a data attribute is same between two elements?

Since you can't do this with a single CSS selector rule (since there is no "same attribute value" selector) - I would recommend using a preprocessor (SASS/SCSS/LESS) to manage the actual writing of the selectors.

You can use @for loop provided to loop through any number of iterations you need.

@for $i from 1 to 50 {
  #board.start_move {
     > .slot.movable[data-slot="#{$i}"]:hover,
        .slot.movable.selected[data-slot="#{$i}"]:hover {
        ~ .chip.top[data-slot="#{$i}"] {
          transform-origin: center;
          transform: scale(1.3);
        }
     }
  }
}

https://www.sassmeister.com/gist/3b0c9ed2cfda0d668d91666aafdebfed

This keeps the solution closest to a "CSS solution" - without changing your JS or how the current code is written.

Universal CSS selector to match any and all HTML data-* attributes

It is currenly impossible to use wildcard masks to select elements by an attribute-name part.

There is a recent thread in the www-style@w3.org mailing list, where Simon Pieters from Opera has proposed a nice possible syntax that has got some acceptance in the thread, so there is a chance that it will become standard somewhen in the future:

x-admin-* { ... }
[data-my-*] { ... }

jQuery selector comparing element's attributes (and/or properties) between them

No. If you look through jQuery's documentation, you'll see there's no such selector.

Also defaultValue is a property, not an attribute.

You can do this:

var changed = $('input').filter(function() {
    return this.value !== this.defaultValue;
});