CSS Selector for <input type="?"

Solution 1

Yes. IE7+ supports attribute selectors:

input[type=radio]
input[type^=ra]
input[type*=d]
input[type$=io]

Element input with attribute type which contains a value that is equal to, begins with, contains or ends with a certain value.

Other safe (IE7+) selectors are:

Parent > child that has: p > span { font-weight: bold; }
Preceded by ~ element which is: span ~ span { color: blue; }

Which for <p><span/><span/></p> would effectively give you:

<p>
    <span style="font-weight: bold;">
    <span style="font-weight: bold; color: blue;">
</p>

Further reading: Browser CSS compatibility on quirksmode.com

I'm surprised that everyone else thinks it can't be done. CSS attribute selectors have been here for some time already. I guess it's time we clean up our .css files.

Solution 2

~~Sadly the other posters are correct that you're~~ ...actually as corrected by kRON, you are ok with your IE7 and a strict doc, but most of us with IE6 requirements are reduced to JS or class references for this, but it is a CSS2 property, just one without sufficient support from IE^h^h browsers.

Out of completeness, the type selector is - similar to xpath - of the form [attribute=value] but many interesting variants exist. It will be quite powerful when it's available, good thing to keep in your head for IE8.

Solution 3

You can do this with jQuery. Using their selectors, you can select by attributes, such as type. This does, however, require that your users have Javascript turned on, and an additional file to download, but if it works...

Oleksandr Buchek

Updated on July 09, 2020

Comments

Oleksandr Buchek almost 4 years
I am trying to create custom slider. The problem is I have 2 sliders in my project with exactly the same functionality, but with two different html structures. First slider item would look like this:
```
<li> 
  <h2>Title</h2>
  <img src="url">
  <span>1000 items</span>
</li>
```
The second slider would look like this:
```
<li> 
  <div>
    <img src="url">
    <h2>Title</h2>
  </div>
  <div>
    <span>1234 count</span>
    <span>4321 count</span>
  </div>
</li>
```
I have solution when you render carousel in one template
```
<div class="carousel">
  <ul class="slides">
    <li *ngFor="#image of images">
      <h2>{{image.title}}</h2>
      <img src="{{image.url}}" alt="">
    </li>
  </ul>
</div>
```
And then you use it like this:
```
<css-carousel [imageUrl]="url" [title]="title"></css-carousel>
```
But, in this case I would be able to use it only for html scenario.

Question:

Is it possible to pass custom html templates within one parent component, so I would use the same logic for different html markups?

Maybe it is possible to pass template itself?
- Sarfraz about 14 years
  
  I have written an article with some detailed info about CSS attribute selectors.
TravisO over 15 years

jquery is the way to do this, or just JavaScript in general
JoshBerke over 15 years

Ok I had tried this but it didn't work now it is working so I must have my syntax messed up.
cic over 15 years

Afaict, this answer is incorrect (the CSS 2.1 part): w3.org/TR/CSS21/selector.html#attribute-selectors. If not, then please clarify you answer.
JoshBerke over 15 years

You just made my day! Now if you want to make my week tell me it can be done in IE6 without using Expressions hehe:-) j/k there
annakata over 15 years

IE8 is still in beta, but quirksmode says "yes": quirksmode.org/css/contents.html
annakata over 15 years

To be fair it requires strict doctype (not a problem) and doesn't work for IE6 (I admit I missed the IE7 specification in the OP)
JoshBerke over 15 years

I'm still supporting IE6 just not this added tiny visual tweak.
annakata over 15 years

fair enough, it was my mistake to answer based on the title, I tend to answer general cases - I really should read questions more :)
Phil.Wheeler over 15 years

Sorry - you're quite right. I just expect the least from IE7 because so often developers are still required to support IE6 at the same time. Should've read the question more carefully and done my homework.
user1260501 over 15 years

I guess I'm so used to supporting IE6 I just assumed it wouldn't work in IE7 either
JoshBerke over 15 years

I wish I could stop supporting IE6 but I can't and I can't do as you suggested...But I really really really wish I could;-)
Oleksandr Buchek over 6 years

Yes, but it would work only for one html markup, I need to accomplish something like this: <carousel> <slideType1></slideType1> <slideType2></slideType2> </carousel>