Css selector begin with

Match all elements having class name starting with a specific string [duplicate]

Is it possible to use a «wildcard» for elements having a class name starting with a specific string in CSS3? Example:

3 Answers 3

The following should do the trick:

div[class^='myclass'], div[class*=' myclass']

Edit: Added wildcard ( * ) as suggested by David

Only if the class beginning with myclass is also the first class-name contained within the class attribute. You might want to try div[class*=myclass] < /* . stuff. */>.

Schweet! I always forget about the attribute thing (probably because it looks so ugly.) What I -still- don’t understand is this: According to the W3C page: w3schools.com/cssref/css_selectors.asp the syntax is: div[class*=»test»] Yet, it -seems- to work like this, with no ‘element’ specified: [class*=»test»] . which I don’t get. IOW, -why- does this work? (I’m not complaining, I like it -better-!) I just don’t want to start using it and find out that it’s a bug that later gets ‘fixed’. Any ideas? THANKS! —JC

@jchwebdev—it is not a bug. The attribute selector is just like any other selector (it can be used as a «stand alone»). It is no different that .myClass potentially being used with div.myClass instead. The attribute selector can stand alone (matching any elements that meet that criteria) or be narrowed to specific element. So don’t worry about it being odd to have [class*=»myClass»] all by itself.

Источник

CSS [attribute^=value] Selector

Set a background color on all elements that have a class attribute value that begins with «test»:

More «Try it Yourself» examples below.

Definition and Usage

The [attribute^=value] selector matches every element whose attribute value begins with a specified value.

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

CSS Syntax

More Examples

Example

Set a background color on all elements that have a class attribute value that begins with «test»:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

CSS Attribute selector — Match attribute values that begin with

That’s likely why it isn’t working, because menutop and menumain don’t match.

You could try renaming the IDs to menu-top and menu-main, or you could do:

This would give you coloring as needed on all menu ul’s, while still giving you the ability to have unique IDs for use with any scripting, etc. as needed.

Also, as Pekka mentioned, the > selector isn’t widely supported so you may want to reconsider use of it for now.

Thanks Kevin! I’ve added the hyphen and it works like a charm. Also removed the > as per your suggestions. Thank you 🙂

No problem 🙂 I’d suggest testing the selector in multiple older browsers to be sure it works. If you’re using Windows, you could try MultipleIE, which is a great IE testing tool tredosoft.com/Multiple_IE. It lets you run all of the older IE versions, including point releases. It would at least let you cover off IE6 if you’re running 7 or 8. You could also try Adobe Browserlab (browserlab.adobe.com/index.html#) for most popular browser renders, or of course the ever-popular browsershots.org

I’ve tested it in some browsers, here are the results: WORKS: Firefox 3.5.7, IE 8.0.6, Chrome 3.0.195.38, Opera 10.00, Safari 4.0.3. DOESN’T WORK: IE 6.0.2900 SP2. (Everything tested under Windows XP Pro SP3). Kevin, I’m using the Internet Explorer Collection (finalbuilds.edskes.net/iecollection.htm) for Windows too. It’s a bit unstable in my computer sometimes and I’m not sure if IE7 is really rendering it as it should. I’ll give Multiple IE a try. Thanks!

Источник

How to get CSS to select ID that begins with a string (not in Javascript)?

How do I match all of those id’s starting with «product»? I’ve seen answers that do this exactly using javascript, but how to do it with only CSS?

5 Answers 5

^= indicates «starts with». Conversely, $= indicates «ends with».

The symbols are actually borrowed from Regex syntax, where ^ and $ mean «start of string» and «end of string» respectively.

See the specs for full information.

Thanks for the method and explanation, I’ve edited my question so its more clear. Out of curiosity, is there a way to match a string inside of the id’s string?

@itamar: I appreciate your attempt at editing my answer, but quote are only required if the value contains characters that are not a valid identifier. product is clearly a valid identifier, and therefore needs no quotes.

Ideally, use a class. This is what classes are for:

And now the selector becomes:

@Blender, thanks, I chose the other answer because it explains a bit more to me and understand the symbols being used. I can’t use classes for this scenario, otherwise, yes it would be nicer.

I want to share this solution too, maybe in the future it could help someone.
As the others said you can write [id^=product] for id

But we can give an example for the class as well: [class^=»product-«] which indicates classes starts with product and also * like this [class*=»product-«]

/* Icons */ [class^="icon-"], [class*=" icon-"] < /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'mk-font' !important; font-size: 3em; >

Источник