CSS: Targeting subsequent elements with a certain class

Question

CSS: Targeting subsequent elements with a certain class

I'm looking for a way to target only the span elements with the class of selection, but only those that are located after a select element with an id starting with "cf-":

<select id="cf-1234567891322418287202826"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // Apply CSS HERE
    </span>
</span>

<select id="cf-8298298876787346863834334"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // Apply CSS HERE
    </span>
</span>

<select id="tu-656555"></select>
<span class="select2 select2-container">
    <span class="selection">
        <span class="select2-selection"></span> // DO NOT Apply CSS HERE
    </span>
</span>

I've tried the code below, but it doesn't seem to work. Can you spot my mistake?

select[id^="cf-"] + span.select2-selection {
    color: blue;
}

html css

Answer 1

Answer №1

The element span.select2-selection is not directly next to select[id^="cf-"], so the selector needs to be adjusted as follows:

select[id^="cf-"] + span span.select2-selection {
   ...
}

This change is necessary because you are targeting a span.select2-selection that is nested inside another span element, which in turn is a sibling of select[id^="cf-"].

Answer 2

The element span.select2-selection is not directly next to select[id^="cf-"], so the selector needs to be adjusted as follows:

select[id^="cf-"] + span span.select2-selection {
   ...
}

This change is necessary because you are targeting a span.select2-selection that is nested inside another span element, which in turn is a sibling of select[id^="cf-"].

Answer 3

Answer №2

Try this out:

[id*="cf-"] .selection{
 //insert your CSS code here
}

Here's some extra information:

[id*="sometext"]

This code will target any element with an ID containing "sometext"

By adding a space after that, you can specify an element within this targeted element

Using .selection will specifically target the element with the class "selection" inside the element with the matching ID

Answer 4

Try this out:

[id*="cf-"] .selection{
 //insert your CSS code here
}

Here's some extra information:

[id*="sometext"]

This code will target any element with an ID containing "sometext"

By adding a space after that, you can specify an element within this targeted element

Using .selection will specifically target the element with the class "selection" inside the element with the matching ID

CSS: Targeting subsequent elements with a certain class

Answer №1

Answer №2

Similar questions

Unable to interpret the remainder: '('static', filename='main.png')' within the context of 'url_for('static', filename='main.png')'

Eliminate the table background effect on hover using HTML and CSS

PHP Administrator Access

Issue with fullPage.js - Unable to scroll to footer on the last section of the page

The content momentarily flashes on the page during loading even though it is not visible, and unfortunately, the ng-cloak directive does not seem to function properly in Firefox

Create a CSS popup alert that appears when a button is clicked, rather than using

Choose a unique text color

Is there a way to automatically adjust the size of an input field after dynamic spans have been

Assistance required for HTML, CSS, and jQuery

The chat window is tall, stretching to its full height and remains stationary, not moving with the

Tips for dividing a JPEG image into separate sections using HTML

Lisp and HTML Scraping: A Powerful Combination

Conceal the navigation bar when scrolling to the top of the

When the user clicks, reveal the form with a seamless transition

Having trouble getting background image transitions to work properly in CSS?

Unable to accept the link ID in the modal

The file path selected in Internet Explorer's open file dialog box is not retained

Unable to set width for td element in media query is not functioning as expected

Is there a way to get rid of those pesky red lines that appear when declaring variables in a .scss file in VS

The Angular integration with Semantic UI dropdown does not display the selected value clearly