How to Write Multiple CSS Selectors in One Line

How to write multiple css selectors in one line?

Comma separate them:

.btn-primary > i.glyphicon,
.btn-primary > span.glyphicon {
    color: #ffffff;
}

More info can be found at w3.org about grouping.

If you want to 'shortcut' them, you'll need a CSS pre-processor, like SCSS or SASS.

css multiple selectors explanation

li ul li {
  display: block;
  float: none;
}

It means it will target all the <li> elements which are inside li ul..The css are always applied to the last selector in the expression. See example below

Stack Snippet

li {  color: blue;}
li ul li {  color: red;}

<ul>  <li>Menu    <ul>      <li>Submenu</li>      <li>Submenu</li>      <li>Submenu</li>    </ul>  </li></ul>

how to apply css to multiple line class selector

If you want the styling to apply to any element with .second-page class you should use:

.second-page {
  backgound-color: red,
}

If you want the styling to apply only to .section-header elements that also have .second-page class, then you should use:

.section-header.second-page {
  backgound-color: red,
}

When there's no space between two classes, it means it refers to an element with both classes.

For more information on CSS selectors, please check
https://www.w3schools.com/cssref/css_selectors.asp

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/

Multiple css selectors vba

Without actual html to work with unsure if there are additional alternatives such as writing simpler/more transferable css selector lists.

That said, here are two options I would consider. Option 1: For very long css selector lists. Reduce the complexity of your code and have the one level of nesting. Option 2: For shorter css selector lists, use OR syntax to test for alternate patterns.

Having each alternate list on its own line, in one place, should aid with code maintenance over time.

---

Dim tests() As Variant, test As Long

tests = Array( _
"div > blockquote > p > span > strong", _
"div > blockquote > p > strong > span", _
"div > blockquote:nth-child(14) > p > strong", _
"div > blockquote:nth-child(13) > p > strong", _
"div > blockquote:nth-child(12) > p > strong")

'-------------------------   
'Option 1: Single nested testing for longer selector list

For test = LBound(tests) To UBound(tests)
    Set obj = HTML.querySelector(tests(test))
    If Not obj Is Nothing Then Exit For
Next

'Option 2: CSS OR syntax for shorter selector list

Dim selectorList As String

selectorList = Join$(tests, ",")
Set obj = HTML.querySelector(selectorList)

'--------------- then continue -------    
If Not obj Is Nothing Then
 ' do something
End If

---

If going with Option 1 I might then go on to consider using a flag boolean variable

Dim found As Boolean
For test = LBound(tests) To UBound(tests)
    Set obj = html.querySelector(tests(test))
    found = Not obj Is Nothing
    If found Then Exit For
Next

If found Then
    'do something
End If

Select multiple pages class one line

Did you mean multiple selector .absolute-footer.dark element in page/post ID 62, 63, 64,... Here is working code:

.page-id-62 .absolute-footer.dark, .page-id-63 .absolute-footer.dark, .page-id-64 .absolute-footer.dark {
   color: rgba(66, 66, 66, 0.52)!important; /* !important just in case */
}

Using multiple CSS selectors

There are two aspects to what's going on:

1. The browser will insert a tbody element if you don't include one (or at least, most do, most of the time; I always use an explicit one, so I don't know the edge cases), and so even if you don't have it in your HTML, you need it in your selector if you're using > (the child combinator). That would change your selector to #my-table > tbody > tr > td. (I advocate always including tbody explicitly in the HTML, just to avoid confusion and edge cases.)

2. The table inside the td inherits its color from the td it's inside. So although your selector targets the correct elements, their descendant elements inherit the color.

You can work around that by giving an explicit color to #my-table td elements, and then the special color only to #my-table > tbody > tr > td elements.

Example (note the tbody in the HTML and also in the selector):

#my-table td {  color: black;}#my-table > tbody > tr > td {  color: #ff0000;}

<table id="my-table">  <tbody>    <tr>      <td>        I want to apply my style to this      </td>      <td>        <table>          <tr>            <td>              But not to this            </td>          </tr>        </table>      </td>    </tr>  </tbody></table>

How to target a group of long similar CSS selectors on one line?

Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once.

The :any() pseudo-class lets you quickly construct sets of similar
selectors by establishing groups from which any of the included items
will match. This is an alternative to having to repeat the entire
selector for the one item that varies.

Mozilla Developer Network

Syntax

:-moz-any( selector[, selector]* )
:-webkit-any( selector[, selector]* )

In this particular case:

/* For FF 4+ */
table.form > tbody > tr > td > :-moz-any(input[type=text],input[type=password],textarea,select) {width: 300px;}
/* For Chrome 12+, Safari 5.1.3+ */
table.form > tbody > tr > td > :-webkit-any(input[type=text],input[type=password],textarea,select) {width: 300px;}

EXAMPLE HERE

This is an experimental technology that is in progress to be standardized in CSS Selectors Level 4 under the name :matches().

How can I apply styles to multiple classes at once?

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

is what you are looking for.

Multiple two-class selectors in Sass

try this:

body{
   &.shop, &.contact, &.about, &.faq {
        background-color:#fff;
    }
}

---

Related Topics