Geek Answers Handbook

Custom item selector

Is there a way to select all custom elements using CSS? I want all elements of user elements to be locked by default (most browsers make them inline by default) and then override them as needed.

My rule might look something like this:

*::custom { display: block; }

All user elements have a dash in the standard, so I could create a rule using this, but it will be slower in many / most modern browsers, as this will require regular expressions. If there was a built-in selector, it would probably be faster.

+5
source share
4 answers

No, there is no pseudo selector for this.

However, of course, not the optimal solution would be to use this type of CSS:

 :not(html, head, body, h1, h2, h3, h4, h5, h6, div, ...) { /* Code here */ }

That would work! At the bottom, if new elements are added, you need to add this element to your non-selector. Yay

^. ^

+2
source

Add an inert user attribute to your custom elements:

 <some-element cutom-elem /> <other-element custom-elem /> <script> var customs = document.querySelectorAll( "*[custom-elem]" ) </script> <style> *[custom-elem] { display: block ; } </style>
+1
source

Here is a workaround based on Florry's answer :not(html):not(head):not(title):not(base):not(link):not(meta):not(style):not(body):not(article):not(section):not(nav):not(aside):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(hgroup):not(header):not(footer):not(address):not(p):not(hr):not(pre):not(blockquote):not(ol):not(ul):not(li):not(dl):not(dt):not(dd):not(figure):not(figcaption):not(div):not(main):not(a):not(em):not(strong):not(small):not(s):not(cite):not(q):not(dfn):not(abbr):not(data):not(time):not(code):not(var):not(samp):not(kbd):not(sub):not(sup):not(i):not(b):not(u):not(mark):not(ruby):not(rb):not(rt):not(rtc):not(rp):not(bdi):not(bdo):not(span):not(br):not(wbr):not(ins):not(del):not(picture):not(img):not(iframe):not(embed):not(object):not(param):not(video):not(audio):not(source):not(track):not(map):not(area):not(math):not(svg):not(table):not(caption):not(colgroup):not(col):not(tbody):not(thead):not(tfoot):not(tr):not(td):not(th):not(form):not(label):not(input):not(button):not(select):not(datalist):not(optgroup):not(option):not(textarea):not(keygen):not(output):not(progress):not(meter):not(fieldset):not(legend):not(script):not(noscript):not(template):not(canvas) :not(html):not(head):not(title):not(base):not(link):not(meta):not(style):not(body):not(article):not(section):not(nav):not(aside):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(hgroup):not(header):not(footer):not(address):not(p):not(hr):not(pre):not(blockquote):not(ol):not(ul):not(li):not(dl):not(dt):not(dd):not(figure):not(figcaption):not(div):not(main):not(a):not(em):not(strong):not(small):not(s):not(cite):not(q):not(dfn):not(abbr):not(data):not(time):not(code):not(var):not(samp):not(kbd):not(sub):not(sup):not(i):not(b):not(u):not(mark):not(ruby):not(rb):not(rt):not(rtc):not(rp):not(bdi):not(bdo):not(span):not(br):not(wbr):not(ins):not(del):not(picture):not(img):not(iframe):not(embed):not(object):not(param):not(video):not(audio):not(source):not(track):not(map):not(area):not(math):not(svg):not(table):not(caption):not(colgroup):not(col):not(tbody):not(thead):not(tfoot):not(tr):not(td):not(th):not(form):not(label):not(input):not(button):not(select):not(datalist):not(optgroup):not(option):not(textarea):not(keygen):not(output):not(progress):not(meter):not(fieldset):not(legend):not(script):not(noscript):not(template):not(canvas)

In addition, you will have to consider SVG and MathML namespaces.

  • One way would be to simply add their tags in a similar way.
  • In some cases (ad blocking), it may be sufficient to add several possible parents to this selector to avoid the & lt; svg> and & lt; math>. Something like :-webkit-any(body, div) > :not(... See : is () ,: match () ,: any () .
  • After implementation, the level 4 selector should allow something like :not(math *, svg *) .
  • You can use @namespace , something like @namespace xhtml "http://www.w3.org/1999/xhtml"; xhtml|*:not(... @namespace xhtml "http://www.w3.org/1999/xhtml"; xhtml|*:not(...
+1
source

You can simply use CSS as shown below:

 custom-element{ color: white; min-height: 20px; }

I checked this in Firefox and Chrome. Not sure about actual compatibility. Please check on your terms.

0
source

More articles:


All Articles