How to Write One CSS Rule for Several Prefixed Selectors

Is it possible to write one CSS rule for several prefixed selectors?

Short answer: no. This behaviour is accordance with the W3C spec (see 4.1). That is if any selector list contains one or more selectors that are invalid, the entire selector list is considered invalid, hence you cannot group browser-specific selectors.

Warning: the equivalence is true in this example because all the
selectors are valid selectors. If just one of these selectors were
invalid, the entire selector list would be invalid. This would
invalidate the rule for all three heading elements, whereas in the
former case only one of the three individual heading rules would be
invalidated.

Using multiple vendor-specific CSS selectors at once

Unfortunately, you can't.

When a selector that the browser does recognise as valid is found, it stops execution of the code block following it.

Only one of the vendor-prefixed selectors you are using will exist in each browsers (for example WebKit browsers do not have the Mozilla and Microsoft vendor-prefixed selectors); therefore you will never be able to execute that block as there is no browser where all three pseudo-selectors are valid.

However...

... you can simply use three different blocks. For example, this should work:

input[type=text]:focus::-webkit-input-placeholder {  color: green;}
input[type=text]:focus::-ms-input-placeholder {  color: green;}
input[type=text]:focus::-moz-placeholder {    color: green;}

<input type="text" placeholder="Hello, world!">

Is there a way to individually target multiple CSS classes at once?

Use a comma.

.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
  color: #fc9426;
}

Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.

It might look something like this:

[class^="nav-"] {  margin: 1rem 0;  padding: 0 1rem;  min-height: 3rem;  color: #333;  font: 1rem/3rem Arial, sans-serif;  border-bottom: 1px solid black;}
/** * Utility/Modifier style properties that * any nav could add to their base of styles. */.nav-branded {  color: white;  background-color: #fc643c;}.nav-branded:hover {  background-color: hotpink;}
/** * These classes have styles specific to  * each class (acts like an ID but  * without the specificity). */.nav-1 {  /* Waiting for some styles. */}.nav-2 {  border-bottom-width: 4px;}.nav-3 {  border-bottom-style: dashed;}

<nav class="nav-1 nav-branded">Nav One</nav><nav class="nav-2">Nav Two</nav><nav class="nav-3 nav-branded">Nav Three</nav>

Adding a prefix to all selectors in a excerpt of CSS with PHP?

Based on Jon's suggestion I wrote the following code:

<?php

$prefix = '#someId';
$css = '#hello, .class{width:1px;height:1px;background-color:#AAA;}
div{font-size:1px}
input, a, span{padding:4px}';

$parts = explode('}', $css);
foreach ($parts as &$part) {
    if (empty($part)) {
        continue;
    }

    $subParts = explode(',', $part);
    foreach ($subParts as &$subPart) {
        $subPart = $prefix . ' ' . trim($subPart);
    }

    $part = implode(', ', $subParts);
}

$prefixedCss = implode("}\n", $parts);

echo $prefixedCss;

To see that it works see http://codepad.org/bqRd83gu

Is there a CSS selector by class prefix?

It's not doable with CSS2.1, but it is possible with CSS3 attribute substring-matching selectors (which are supported in IE7+):

div[class^="status-"], div[class*=" status-"]

Notice the space character in the second attribute selector. This picks up div elements whose class attribute meets either of these conditions:

[class^="status-"] — starts with "status-"
[class*=" status-"] — contains the substring "status-" occurring directly after a space character. Class names are separated by whitespace per the HTML spec, hence the significant space character. This checks any other classes after the first if multiple classes are specified, and adds a bonus of checking the first class in case the attribute value is space-padded (which can happen with some applications that output class attributes dynamically).

Naturally, this also works in jQuery, as demonstrated here.

The reason you need to combine two attribute selectors as described above is because an attribute selector such as [class*="status-"] will match the following element, which may be undesirable:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

If you can ensure that such a scenario will never happen, then you are free to use such a selector for the sake of simplicity. However, the combination above is much more robust.

If you have control over the HTML source or the application generating the markup, it may be simpler to just make the status- prefix its own status class instead as Gumbo suggests.

Creating CSS Rules Using Class Prefixes

You can use :

[class^=col] {margin:0.2%;}

div {  height: 50px;  margin: 10px;}[class^=col] {  background: red;}

<div class="col-md-1"></div><div></div><div class="col-md-2"></div>

How do I handle setting multiple styles (due to vendor prefixes) in CSS with Javascript?

You can create a CSS class selector with the standard property and prefixed properties and simply use JavaScript to add the class to whatever element you need on a button click. For example:

var navButton = document.getElementById("navControl");navButton.addEventListener("click", showNav, false);
function showNav() {    var nav = document.getElementById("test");    nav.className = "flexClass";}

nav#test {    display: none;    flex-flow: column nowrap;}
#test.flexClass {    display: flex; /* Standard for Firefox, Chrome, and Opera */    display: -webkit-box;  /* iOS 6-, Safari 3.1-6 */    display: -ms-flexbox;  /* IE 10 */    display: -webkit-flex; /*  Safari 6.1+. iOS 7.1+ */    background: lightgray;    border: 1px solid black;}

<button id="navControl">Show Nav menu</button><nav id="test">Nav menu goes here</nav>

Compact multiple CSS Class selection criteria with OR

This will be made possible with the upcoming :matches() selector:

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

While this is currently implemented internally as :any() in multiple browsers, it is implemented with prefixes, rendering it pointless to use as it forces you to bloat your code even further in order to avoid the rule that unrecognized selectors must invalidate the entire ruleset:

/* 
 * Why do this when you can just compact your three selectors
 * into a single rule as you're already doing?
 */

.container > :-moz-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :-webkit-any(h1, h2, h3):hover > .myicon {
    display: inline;
}

.container > :matches(h1, h2, h3):hover > .myicon {
    display: inline;
}

In the meantime, if you do not have access to a preprocessor that supports nesting of rules, and you cannot change your markup, you will need to stick with what you have.

Alternatively, you could also remove parts of your selector based on assumptions of your markup. For example, if .myicon will only ever appear in .container > :matches(h1, h2, h3) anyway, then you may not need to look for :matches(h1, h2, h3) — you can just do this instead:

.container > *:hover > .myicon {
    display: inline;
}

(The * is for illustration but not necessary; :hover by itself is valid CSS, just as .container and .myicon are.)

Is it possible to give one CSS class priority over another?

specify a more specific selector, eg prefix an ID before it or prefix the nodename before the class
assign it after the other class
if two classes are in separate files, import the priority file second
!important

!important is the lazy way, but you really should go for #1 to avoid important-ception. Once you've added one !important you can't use it to make some other rule even more important.