Exclusive CSS Selector

Exclusive CSS selector

In such case you may consider attribute selector like this:

console.log(document.querySelectorAll('li[class="a"]').length)

li[class="a"] {  color:red;}

<ul>  <li class="a">Select me</li>  <li class="a b c d more classes">Don't select me</li>  <li class="a b">Don't select me</li>  <li class="a">Select me</li></ul>

How to select a non unique element through CSS

FWIW - Here's a solution without which will work in IE7+

Use the General sibling selector

p {
   /* styles first p here */
}
p ~ p {
  /* styles second (and additional) p here */
}

 p {   color: tomato; } p ~ p {   color: black; }

<h2> Title 1 </h2><p>paragraph 1</p><h2>title 2 </h2><p>paragraph 2</p>

How to generate unique css selector for DOM element?

let say you have a list of links for the sake of simplicity: you can simply pass the index of the triggering element in the collection of all elements

<a href="#">...</a>
<a href="#">...</a>    
<a href="#">...</a>

the js (jQuery 1.7+, I used .on()otherwise use bind()) function can be

var triggers = $('a');
triggers.on('click', function(e) {
   e.preventDefault();
   var index = triggers.index($(this));
   /* ajax call passing index value */
});

so that if you click on third element index value passed will be 2. (0-based index);
of course this is valid as long as the code (the DOM) doesn't change. Later you can use that index to create a css rule to that element e.g. using :nth-child

Otherwise if each one of your elements have a different attribute (like an id) you can pass that attribute

example on JsFiddle : http://jsfiddle.net/t7J8T/

CSS3 combining selectors with OR instead of AND

You'll need to split them up using a comma:

body[class*="page-node-add-"], body[class~="page-node-edit"] {background:red;}

The problem with using a comma:

... is that you can't do it any other way than with a comma. Perhaps it could have been remedied with Selectors 3, but unfortunately the spec says otherwise. That is only going to be remedied by Selectors 4, either because it wasn't proposed until recently, or it was proposed but didn't make the cut for level 3.

In level 4 of Selectors you will be able to do something like this:

body:matches([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
{...}

Currently, this is being implemented under its originally-proposed name, :any(), with the prefixes :-moz-any() and :-webkit-any(). But using :any() in public-facing CSS is pointless given that

1. only Gecko and WebKit support it; and

2. you have to duplicate your rulesets because of the way prefixed selectors are handled, which not only defeats the intended purpose of the :matches() selector, but makes things even worse:

   body:-moz-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   body:-webkit-any([class*="page-node-add-"], [class~="page-node-edit"]) form.node-form > .field-type-field-collection > table > thead tr th
   {...}
   

In other words, until implementations update themselves to the standardized :matches(), there is no other viable solution (save from using a preprocessor to generate the repeated selectors for you).

CSS Selectors - Search for unique value in a child(ren)

Oh my word. I think I've stumbled across the answer and it's something I never even thought of.

So in my Css selectors I've always used ">" to seperate my elements, I always just thought this was the syntax to separate them. However, just read that ">" is for direct children of the previous element!

If you use a space instead of ">" then it searches the entire tree beneath that element for the value you are looking for! I'm somewhat self taught in automation and I can't believe I didnt realise this was a thing.

Just tried a selector similar to "#myId [value="my value"]" using a space to separate the two elements and it searched the whole tree and landed correctly on my element.

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 selector - Selecting specific tags inside a parent class

1. you should use > for that
2. > will be used when you want a property value to be applied to specific element not for all element.

.new1>h1,.new1>p {  color: purple;  text-align: center;}

<p>This is a paragraph.</p>
<section class="new1">  <p> Helloooo </p>  <h1> Hiiii! </h1></section>
<section class="new2">  <p> Hello </p>  <h1> Hi! </h1></section>

---

Related Topics