CSS selector for multiple different class name combinations
You could always negate .class2
and .class3
using the :not()
pseudo-class:
[class^="class2"]:not(.class2),
[class^="class3"]:not(.class3) {
color: #f00;
}
[class^="class2"]:not(.class2),[class^="class3"]:not(.class3) { color: #f00;}
<div class="class1">don't select</div><div class="class2">don't select</div><div class="class3">don't select</div><div class="class4">don't select</div>
<div class="class21">select</div><div class="class22">select</div><div class="class23">select</div><div class="class24">select</div>
<div class="class31">select</div><div class="class32">select</div><div class="class33">select</div><div class="class34">select</div>
How can I apply styles to multiple classes at once?
.abc, .xyz { margin-left: 20px; }
is what you are looking for.
Same css for multiple combinations of class selector not working
You need to separate selectors by comma (https://jsfiddle.net/dsp4w224/):
div.team-info.team-pre-info.lpanel.Soccer,
div.team-info.team-final-in-info.lpanel.Soccer,
div.score-box.score-box-home.Soccer {
float:right;
}
div.team-info.team-pre-info.rpanel.Soccer,
div.team-info.team-final-in-info.rpanel.Soccer,
div.score-box.score-box-away.Soccer {
float:left;
}
More information: http://www.w3schools.com/cssref/sel_element_comma.asp
CSS: Style applied to a combination of classes?
$('.bold_green.bold_blue').addClass('something-else');
Or in CSS:
.bold_green.bold_blue { color: pink; }
Notice there's no space between the selectors.
How to combine class and ID in CSS selector?
In your stylesheet:
div#content.myClass
Edit: These might help, too:
div#content.myClass.aSecondClass.aThirdClass /* Won't work in IE6, but valid */
div.firstClass.secondClass /* ditto */
and, per your example:
div#content.sectionA
Edit, 4 years later: Since this is super old and people keep finding it: don't use the tagNames in your selectors. #content.myClass
is faster than div#content.myClass
because the tagName adds a filtering step that you don't need. Use tagNames in selectors only where you must!
How to Generate All Possible CSS 2 Selector Combinations?
First, let's stick to a narrow class of selectors involving tag names, class names and IDs, nothing fancy like E > F
or E + F
. Let's also disallow combinations of class names (.class1.class2.class3
), otherwise a single element with 10 class names would generate 4 million selectors alone.
Each of our full selectors consists of simple selectors separated by spaces. Every simple selector is a combination of tag{0,1}id{0,1}class{0,n}
- i.e. each element has exactly one tag, at most one ID, and it can have an arbitrary number of class names. That gives us the upper limit of 2 * 2 * (n + 1) simple selectors for a single element.
Given a reference to a DOM element grab it's tag name, ID and class names. Calculate all possible simple selectors as described above. Lets call this set A1. Move one step up the hierarchy to it's parent, calculate all simple selectors for that parent element - that'll be the set A2. Continue until you reach the html element - the set Am. Now you'll have a list, consisting of m items, each item is a set of simple selectors.
Now pick some of these sets and find their cartesian product. Say, m = 5. How many sets can you pick? The set A1 is always present, but others are optional. For each one of them you either pick it or not. That's like binary numbers:
0000 // 0, A1
0001 // 1, A1 x A2
0010 // 2, A1 x A3
0011 // 3, A1 x A2 x A3
0100 // 4, A1 x A4
...
That means you'll have 2^(m-1) cartesian products. You can now convert them to strings. The last step is to remove duplicates, consider this example:
<div>
<div>
<span></span>
</div>
</div>
Our calculations will yield this list:
span
div span // inner div
div span // outer div
div div span
Those two divs yield duplicate selectors. Remove those and the job is done.
All the steps are very simple algorithmically. I'm sure you can figure them out, but if you get stuck somewhere or need further clarification feel free to ask me in the comments.
UPDATE
So, I decided to play with it a bit more and wrote the program, here's the list of selectors your example generates: http://pastie.org/1616164
What do commas and spaces in multiple classes mean in CSS?
.container_12 .grid_6,
.container_16 .grid_8 {
width: 460px;
}
That says "make all .grid_6's within .container_12's and all .grid_8's within .container_16's 460 pixels wide." So both of the following will render the same:
<div class="container_12">
<div class="grid_6">460px Wide</div>
</div>
<div class="container_16">
<div class="grid_8">460px Wide</div>
</div>
As for the commas, it's applying one rule to multiple classes, like this.
.blueCheese, .blueBike {
color:blue;
}
It's functionally equivalent to:
.blueCheese { color:blue }
.blueBike { color:blue }
But cuts down on verbosity.
Related Topics
Page Content Don't Scroll When Keyboard Shows Phonegap
How to Fill 100% of Remaining Width
How to Customize Radio Button in HTML
Hide Div on Mobile Devices, Using CSS
Font Weights Differing in Webkit and Firefox
Why Is Padding to a Wrapper Div Looks Different The Margin to an Inner Div
Cannot Make Max-Width Work with Bootstrap Dropdown-Menu
Bootstrap 4 Navbar Doesnt Collapse in Angular4
Move Floated Area Inside Paragraph
Ng-Animate: Conditionally Switching "Back" Transition (Bug)
Styling Placeholder on Firefox
How to Center This Menu with CSS
Applying CSS to Google Visualization Table