Use CSS to Target Any Element That Has Any Two Classes on It

Target elements with multiple classes, within one rule

  • .border-blue.background { ... } is for when both classes are used together.

  • .border-blue, .background { ... } is for either class.

  • .border-blue .background { ... } is for where '.background' is the child of '.border-blue'.

See Chris' answer for a more thorough explanation. Also see W3 Docs on CSS Combinators

How to select an element with 2 classes

You can chain class selectors without a space between them:

.a.b {
color: #666;
}

Note that, if it matters to you, IE6 treats .a.b as .b, so in that browser both div.a.b and div.b will have gray text. See this answer for a comparison between proper browsers and IE6.

Using two CSS classes on one element

If you want two classes on one element, do it this way:

<div class="social first"></div>

Reference it in css like so:

.social.first {}

Example:

https://jsfiddle.net/tybro0103/covbtpaq/

CSS Selector that applies to elements with two classes

Chain both class selectors (without a space in between):

.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}

If you still have to deal with ancient browsers like Internet Explorer 6, be aware that it doesn't read chained class selectors correctly: it'll only read the last class selector (.bar in this case) instead, regardless of what other classes you list.

To illustrate how other browsers and IE6 interpret this, consider this snippet:

* {
color: black;
}

.foo.bar {
color: red;
}
<div class="foo">1. Hello Foo</div>
<div class="foo bar">2. Hello World</div>
<div class="bar">3. Hello Bar</div>

Can you target an element with CSS only if 2 classes are present?

Yes, just concatenate them: .content.main. See CSS class selector.

But note that the Internet Explorer up to version 6 doesn’t support multiple class selectors and just honors the last class name.

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>

How to target an after of an element with two classes with SCSS?

Well you can do it in a few ways

a. This you should use if you want to add some styles to the .active class also.

.item {
background: red;
height: 100px;
width: 100px;
&.active {
&:after{
content: "aaa";
}
}
}

or

b. This you should use if you want just to add some styles to the :after pseudo-element if item has class active

.item {
background: red;
height: 100px;
width: 100px;
&.active:after{

content: "aaa";

}
}

see jsFiddle

Sass - two classes in a single tag

Here you go:

.question_actions {
float: right;
font-size: 1em;
width: 110px;

.question_action {
margin-bottom:8px;
padding: 3px;
}

&.active {
//some css
}
}

CSS rule to apply only if element has BOTH classes

div.abc.xyz {
/* rules go here */
}

... or simply:

.abc.xyz {
/* rules go here */
}


Related Topics



Leave a reply



Submit