What are the CSS classes for block instances? Preface

Now in Drupal 8 we can finally create block instances: i.e, placing a block more than once -> in more than one region.

Does any instance has a unique css class?

Why I ask this?

In some cases you want to hide 1 block instance, but not the other. 

For example, say you have the block "contact_form" in 2 regions: "Highlighted" &amp;&amp; "Sidebar". You can hide the first instance for desktop devices, thus making it appear only for mobile devices this way:

media screen and (min-width: 768px) {

#block-contact-form .instance_1 {display: none}

}



.instance_1 is a fictive name and I used it only to explain how such a class is so needed.
Its .instance_1 and not .instance_2 as In Drupal machine-generated objects are usually Zero-based indexed.


Doing so can be good for better UI-UX and better accessibility for mobile-device users.
After I created a second instance for a block, I saw that Drupal 8 doesn't create a class to mark it, but rather creates a similar, yet almost identical CSS id (#) name for it which is not zero-based index in this case, rather one-based-indexed.

For example, if the first instance' id is #block-contact-form, the second will be #block-contact-form-2.

If we want to hide only the first instance, we can now do:

media screen and (min-width: 768px) {

#block-contact-form {display: none}

}


If we wanted to hide the second one we would change #block-contact-form to #block-contact-form-2.