CSS Selectors - How to Select 'For' in CSS

CSS selectors - how to select 'for' in CSS?

Using the (CSS2) attribute selector:

.error[for="username"]

This will work in IE8+ and all modern browsers.

---

IE7's attribute selector is buggy: as explained here, to match for you must use htmlFor.

So, if you need IE7 support, use this:

.error[for="username"], .error[htmlFor="username"]

How to select label for=XYZ in CSS?

The selector would be label[for=email], so in CSS:

label[for=email]
{
    /* ...definitions here... */
}

...or in JavaScript using the DOM:

var element = document.querySelector("label[for=email]");

...or in JavaScript using jQuery:

var element = $("label[for=email]");

It's an attribute selector. Note that some browsers (versions of IE < 8, for instance) may not support attribute selectors, but more recent ones do. To support older browsers like IE6 and IE7, you'd have to use a class (well, or some other structural way), sadly.

(I'm assuming that the template {t _your_email} will fill in a field with id="email". If not, use a class instead.)

Note that if the value of the attribute you're selecting doesn't fit the rules for a CSS identifier (for instance, if it has spaces or brackets in it, or starts with a digit, etc.), you need quotes around the value:

label[for="field[]"]
{
    /* ...definitions here... */
}

They can be single or double quotes.

CSS Select Selector

Try this:

select {
    background:#000;
}

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

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']".

CSS selector to find select with specified option label

You can't do this with CSS.

You can either use this jQuery selector (:has() and :contains() are not part of CSS):

$("select:has(option:contains('Second'))")

Or this XPath expression:

//select[contains(option, 'Second')]

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 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.

Is there a CSS selector to select html elements that begin with certain letters?

Short answer: Sort of, via Namespaces.

If you give all of your tags the same namespace, you should be able to target them via namespace|*. Probably. The only official documentation I could find is the spec itself: https://drafts.csswg.org/css-namespaces-3/
And trying to make sense of it is hard- the (very) naive approach doesn't work basically at all. This is because @namespace designates the url as the set, and the prefix is just an internal name for it.

I'll probably revisit this answer later once I've figured out how the hell namespaces work- this isn't something that I've really ever needed before, but it is something that I should know- especially now.

---

Long answer: Yes? I think?

Beyond Namespaces in CSS3...

https://drafts.csswg.org/selectors-4/

There's something close to what you're wanting with the planned :matches() selector, however, you'll still need to explicitly state every tag you want. You can just group all of your tags instead of having to repeat the entire selector for each one.

You also might be able to bs something with :scope, however, I'm not overly clear on what exactly it's doing.

Personally I find tag-based selection to be somewhat of a Bad Thing outside of changing browser defaults and a page's lone table (which I honestly still overuse due to how quick they are to get right and the fact that table-layout:fixed makes them about 200x less terrible... plus my job is mostly converting paper/Access forms into web forms, which means I'm actually working with a lot of actually-tabular data). You should really be giving all of those tags of yours a default layout explicitly, and then use classes to group them.

Attribute selectors are not to substitute classes, by the way. They're to extend precision. Stop abusing them.

EDIT: since there was a question as to what I meant by that last line...

• tagname is a very blanket selector, it hits every instance of a tag. Hence, it semantically means something like 'these are the default settings of this tag'.
• #id means 'this specific element' and .class means 'any of this class'. The former is about as specific as you can get, and the latter was originally added to be THE way of targetting only certain elements. As such, these are your workhorse selectors, they are the most performant and the most semantically correct for styling.
• [attribute] was added to increase specificity. Say you want only links using http to be nixed: a[href^="http:"]{display:none;}. Another use is for shorthand, with the best example being the hidden shim of [hidden]{display:none;}. Additionally you can use it for quick-and-dirty hacks- say you notice an image is off-center by two pixels. Instead of recentering it in your image editor, you can have the browser fix it via img[src="image_path"]{position:relative;left:2px;}.
  However, no matter how you use it, it is a form of merging style and data. Merging style and data is usually a Bad Thing, as data changes often while the kind of data, thus the needed style does not. Thus, you should avoid doing so unless it's simply too convenient not to.

---

Related Topics