CSS Select Selector

Try this:

select {
    background:#000;
}

As I know, there is no <input type="select" />, just <select></select>.

CSS :selected pseudo class similar to :checked, but for option elements

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Source: w3.org

So, this CSS works, although styling the color is not possible in every browser:

option:checked { color: red; }

An example of this in action, hiding the currently selected item from the drop down list.

option:checked { display:none; }

<select>

    <option>A</option>

    <option>B</option>

    <option>C</option>

</select>

CSS selector - Select first option of required select

To style the first option of a required select, I would simply use an attribute selector, followed by the :first-child pseudo-class.

select[required] option:first-child {

  color: red;

}

<select required name="fontSize">

<option value="">Please select</option>

<option value="9">9 px</option>

<option value="10">10 px</option>

<option value="11">11 px</option>

<option value="12">12 px</option>

<option value="13">13 px</option>

<option value="14">14 px</option>

<option value="15" selected="">15 px</option>

<option value="16">16 px</option>

</select>

<select name="fontColor">

<option value="">Please select</option>

<option value="red">Red</option>

<option value="green">Green</option>

<option value="blue">Blue</option>

</select>

How to select first descendant of specific type with CSS Selector in complex html

If your inputs are like in your example, you are able to use first-child:

#root input:first-child {

  border-color:red;

}

<div id="root">

    <header>

        <h1>Hello World</h1>

    </header>

    <div>

        <div>

            <form>

                <input value="First Name">

                <input value="Last Name">

            </form>  

        </div>

    </div>

</div>

CSS select element with particular child element attribute

I tried your complex selector in CSS, plain JS and using the jQuery lib... Guess who wins!

// Checking if JS handles that selector....

// Let's have the selector in a variable, just to make sure the same is tried in both cases...
let ourSelector = ".wp-block-image figure.alignright:has(img:not([src*='triangle']))"

// JS querySelector
try{
  document.querySelector(ourSelector).style.border = "3px solid blue";
}
catch(error){
  console.log(error.message);
}

// jQuery! (--WORKS--)
$(ourSelector).css("border", "3px solid blue");

/* This rule applies */
.wp-block-image figure.alignright img:not([src*="triangle"]) {
  border: 3px solid red;
}

/* This one not */
.wp-block-image figure.alignright:has(img:not([src*="triangle"])) {
    opacity: 0.2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wp-block-image">
  <figure class="alignright">
    <img width="387" height="500" src="https://via.placeholder.com/300x300.jpg?text=triangle" />
  </figure>
  <figure class="alignright">
    <img width="387" height="500" src="https://via.placeholder.com/300x300?text=square" />
  </figure>
</div>

How to select a specific text using CSS selector

CSS does not have any method like text. So in HTMLDOM, it is not possible at this point of time to locate the element based on text.

Moving further, You could do below in nightwatch.js

.useXpath().click('//span[contains(text(), "' + desiredText+ '")]')

and before calling this assign Auto-Publish to the desiredText variable.

I need CSS selector to select elements that contain a given text

CSS Selector doesn't support :contains() anymore. You have to use XPath "//div[text()='Clear search']".

Is there a CSS selector for elements containing certain text?

If I read the specification correctly, no.

You can match on an element, the name of an attribute in the element, and the value of a named attribute in an element. I don't see anything for matching content within an element, though.

CSS Select Selector