CSS selector for all elements starting with a prefix

Question

I have several polymer elements.

<ps-el-one/>
<ps-el-two/>
<ps-el-three/>
<ps-el-four/>

I want to be able to query all of the elements which begin with "ps-" with either a CSS selector or javaScript.

I whipped up the following solution, but I am wondering if there is anything more efficient?

var allElementsOnPage = document.querySelectorAll('*');
var res = [];
for (var index in allElementsOnPage) {
  var el = allElementsOnPage[index];
  if (el && el.tagName && el.tagName.substr(0, 3) == 'PS-') {
    res.push(el);
  }
}

This solution seems very inefficient.

this could be helpful to you https://www.polymer-project.org/1.0/docs/devguide/styling — Geeky, Nov 30 '16 at 21:23
a whitelist of all 4 names, and looping each distinctly, is going to be more performant than full-doc iteration — dandavis, Nov 30 '16 at 21:44

Yaser · Answer 1 · 2016-11-30T21:25:02.117

1

I'm not aware of any element selector, but it is possible with CSS3 attribute and class substring-matching selectors (which are supported in IE7+):

[class^="tocolor-"], [attr*=" tocolor-"] {
    color:red 
}

Not sure if this is what you want, but probably gives you another way of achieving the same.

edited Nov 30 '16 at 21:25

answered Nov 30 '16 at 21:11

Yaser

5,609
1
15
27

score 0 · Answer 2 · answered Nov 30 '16 at 21:30

0

Check this here

<input name="man-news">
<input name="milkman">
<input name="letterman2">
<input name="newmilk">

<script>
$( "input[name*='man']" ).val( "has man in it!" );
</script>

answered Nov 30 '16 at 21:30

Marios Nikolaou

1,326
1
13
24

score 0 · Answer 3 · answered Nov 30 '16 at 21:47

You can use something like this instead of querySelectorAll

function myFunction() {
    var x = document.getElementsByTagName("*");
    var res = [];
    for(var i = 0; i < x.length; i++) {

   if(x[i].tagName.indexOf('PS-') == 0) {

         res.push(x[i]);
    }
    }

}

Gaurav Grover · Answer 4 · 2016-12-01T00:27:48.223

-4

Just give a class to all the elements common in nature. and do:

HTML

<ps-el-one class="ps"/>
<ps-el-two class="ps"/>
<ps-el-three class="ps"/>
<ps-el-four class="ps"/>

CSS

// for all elements together
.ps { /* css for all elements together */ }    

// for individual elements
.ps:nth-of-type(1) { /* css for 1st ele */ }
.ps:nth-of-type(2) { /* css for 2nd ele */ }
.ps:nth-of-type(3) { /* css for 3rd ele */ }
.ps:nth-of-type(4) { /* css for 4th ele */ }

JS

// for all elements together
var ps = document.querySelectorAll('.ps');

// for individual elements
var ps1 = document.querySelectorAll('.ps')[0];
var ps2 = document.querySelectorAll('.ps')[1];
var ps3 = document.querySelectorAll('.ps')[2];
var ps4 = document.querySelectorAll('.ps')[3];

edited Dec 01 '16 at 00:27

answered Nov 30 '16 at 21:31

Gaurav Grover

191
1
10

If you are to give classes you can use substring class selectors instead of selecting them one by one – Yaser Nov 30 '16 at 21:36
@YaserAdelMehraban . NO! Do you see any point of first making element names different then making class names different too and then using complex substring function to fetch them all. And it is the requirement of Polymer to have tag names different for different components. If you have given me -1 then please remove it. Maybe you misunderstood me. – Gaurav Grover Dec 01 '16 at 00:31

CSS selector for all elements starting with a prefix

4 Answers4