Multiple Classes in CSS Selector

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/

Select element based on multiple classes

You mean two classes? "Chain" the selectors (no spaces between them):

.class1.class2 {
    /* style here */
}

This selects all elements with class1 that also have class2.

In your case:

li.left.ui-class-selector {

}

Official documentation : CSS2 class selectors.

---

As akamike points out a problem with this method in Internet Explorer 6 you might want to read this: Use double classes in IE6 CSS?

Multiple two-classes css-selector?

Think you can use:

.content-wrapper.layout-TILE .draggable .some-image-class {
  height: 2px;
  width: 15px;
}

.content-wrapper.layout-LIST .draggable .some-image-class {
  height: 5px;
  width: 5px;
}

This way only when the .draggable classname is added will those styles be applied.

CSS Selector with multiple class and one ID

You need to add the id in both. Each one is a different selector:

.page-id-47745 #masthead,
.page-id-35419 #masthead {
  padding-bottom: 40px !important;
}

How can I select an element with multiple classes in CSS?

No. You should combine individual class names using .:

.twelve-col.col.main-menu

How can I apply styles to multiple classes at once?

.abc, .xyz { margin-left: 20px; }

is what you are looking for.

css multiple class / id selectors?

You are looking for something like this :

.oddBoxOut, 
.evenBoxOut {
  width: 12em;
  padding: 0.5em;
  margin: 0.5em;
  border: solid 1px black;
}

.oddBoxOut {
  float: left;
}

.evenBoxOut {
  float: right;
}

Update :

p#exampleID1 { background-color: blue; } 
p#exampleID2 { text-transform: uppercase; }

How To Select Two classes with CSS?

This selector can match all classes begins with 'news' eg. news1, news1msg

[class^="news"] {
    -webkit-filter: blur(0);
    filter: blur(0);
}

Edit:
In the snippset I suppose you have what you need with your blur.

.news1 {

    background-color:#33aaff;

    width:100px;

    height:100px;

    text-align:center;

    -webkit-filter: blur(3px);

    filter: blur(3px);

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;;

}

.news1:hover {

    -webkit-filter: blur(0);

    filter: blur(0);

}

.news1msg {

    color:white;

    font-size:25px;

    -webkit-transition: .3s ease-in-out;

    transition: .3s ease-in-out;;

}

<p class="news1">

  <span class="news1msg">some text</span>

</p>

CSS: Select multiple classes' child

Use the :is() pseudo-class selector

:is(.parent1, .parent2, ...) > child {
    ...
}

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.

---

Related Topics