SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Regex style class selectors in CSS3?

    I'm assigning a special css to my ul elements in order to specify column counts and break points. For example:

    HTML Code:
    <ul class="col1"><li>....</li><li>....</li>...</ul>
    ...denotes a single column listing.

    HTML Code:
    <ul class="col2"><li>....</li><li>....</li>...</ul>
    ...denotes a two column listing.

    HTML Code:
    <ul class="col3"><li>....</li><li>....</li>...</ul>
    .denotes a three column listing.

    etc...

    The common thing is that the "col" stem will always precede the column count.

    In my css, I'd like to specify that any element that has the root css class "col" have a special class of properties. The same as if I had used class="col 1" or class="col 2" or class="col two".

    Is this possible with css3 similar to how we can target specific attribute values with something like this?

    Code:
    header[role="banner"]
    PS: obvious question you may be asking is "Why not just use class='col x' and then target the collection with .col {...}"?

    Obviously I can do that, however, I want to learn something new, if its possible. Also, I'm trying to keep the css as concise as possible without being too generic so as to cause css clashes with unknown css in the markup (wordpress app, so there can be plugins that have their own css in the same scope as mine; and chances of their being classes named "one", "two", "three", etc are too high to use them as stand alone subclasses.)

  2. #2
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Update: after a bit more research, I've found the answer I'm looking for. Hopefully it helps someone else:

    Code:
    .myelement ul[class^="col"]
    You can use this to target any ul element within the "myelement" container which has css beginning with the stem identified in the class paramater.

    Browser Support
    The above selector works in all modern browsers: Safari, Chrome, Firefox, Opera, and IE. Internet Explorer has perfect support for this all the way down to version 7, but no support in 6


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •