Css-Selector for Multiple Elements

CSS selector for multiple sub-elements

Modern Option

Note: it may not be compatible with older browsers:

.live_grid :is(h1,h2,h3,h4,h5) {
    /* style here */
}

See here for more information about :is(): https://developer.mozilla.org/en-US/docs/Web/CSS/:is

Standard Option:

If you want to style all the headers in that class, you have to do it like this (which could also be done without the line breaks). Notice each selector has .live_grid in it:

.live_grid h1,
.live_grid h2,
.live_grid h3,
.live_grid h4,
.live_grid h5,
.live_grid h6 {
    /* style here */
}

When you comma separate things, they're independent of each other - hence the need to reference the class again.

For example:

#myDiv1, .live_grid, #myDiv2 {
    color: blue;
}

This would set the text-color for everything in the #myDiv1 element, everything in the #myDiv2 element, and everything in the .live_grid element to having text color blue.

This also explains the reason your CSS is matching all the headers - you're referencing them individually, separated by commas - there is no selector for their containing element(s).

CSS pre-processor option

Or, you can always go with something like LESS or SASS which allows you to write nested rules something like this:

#live_grid {
    h1, h2, h3, h4, h5, h6 {
        /* style here */
    }
}

Custom class option

Lastly, you could add a class to all of your headers and just refer to that class:

<-- HTML -->
<h1 class="custom-header">Title of Blog Post</h1>
<h2 class="custom-header">Subtitle of Blog Post about Pizza</h2>

/* CSS */
.custom-header {
    /* style here */
}

How to select amongst multiple elements having same css?

What you want to achieve is not possible with CSS selectors.

:nth-of-type() would get you the closest, but only evaluates amongst siblings and will not find the nth item across levels.

You could use a CSS selector to identify all of the elements with that class, and then filter select the 3rd node, but that would not be as efficient and would require more code to maintain.

If you can use the XPath (//span[@class='nav-label'])[3] and it is working for you, then stick with that XPath expression.

How to select multiple elements using CSS

You don't need the other elements in the selector, unless you only want to match .c3 if it is within div.c1 .c2:

.c3 input,
.c3 textarea {
    /* that's it! */
}

If you do (per your edit), use this:

div.c1 .c2 .c3 input,
div.c1 .c2 .c3 textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/6/

after edit: thats what i'm trying to avoid (my real stylesheet is a lot more complex and css rules are longer, and its getting hard to read)

In that case, to make things easier just add another class to that .c3 like this:

<div class="c3 special">

.c3.special input,
.c3.special textarea{
    border: 1px solid #f00;
}

Demo: http://jsfiddle.net/wesley_murch/Bp3qn/7/

If you MUST have the selector as small as possible and there are no other children of .c3.special, just use the star selector (almost never recommended):

.c3.special * {border: 1px solid #f00;}

CSS-Selector for multiple elements

You will need to target the input and the button separately. Because you want this to apply only when the input has focus, you will need to repeat the entire selector including the input:focus portion, then use a + combinator to link the button to the focused input:

.rf_re1-suche_container input:focus,

.rf_re1-suche_container input:focus + button {

    background: orange;

}

<section class="rf_re1-suche_container">

    <input type="search" placeholder="Your search">

    <button>Send</button>

</section>

How to Select Multiple Elements inside a div for CSS

, separates rules, so you must repeat .divone:

.divone h1,
.divone p {
    color: yellow;
}

You can use some CSS preprocessor like LESS or SASS to nest rules:

.divone {
    h1,
    p {
        color: yellow;
    }
}

but it will compile to same CSS rules.

Your current rule .divone h1, p says apply for h1 that is inside .divone or any p element on page

Taking element with css selector with multiple elements in a table

You can use xpath to locate the element using the Mask text

WebElement element = getWebDriver().findElement(By.xpath("//td[text()='Mask']/following-sibling::td[2]"));
element.getText(); // 8%

How to select multiple elements that are children of given element?

You'll have to reference #mydiv twice...

#mydiv > pre, #mydiv > div

I removed the extraneous div element selector as the ID is specific enough.

Shortest possible selector for multiple elements

To expand on my comment, if you choose to use a CSS pre-processor such as SASS or LESS, you can do nested selectors, like so:

/* SASS example */
.btn-group.pull-right.with_space {
  i + i, .btn + .btn {
     /* ... */
  }
}

After compiling, the resulting CSS will be similar to what you had already written.

Sometimes, it might be better to add a common class to the elements that are sharing styles. So, in your .btn + .btn and i + i elements, add a class, such as btn_and_i, so you can target them with a single selector:

/* CSS example */
.btn_and_i {
   /* ... */
}

If you're hell-bent on making this the "shortest" selector possible, then add a single-character class to the targeted elements, such as "a".

.a {
  /* ... */
}