Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    "contains" in CSS attribute selectors

    It's a long shot this one ... but is there any way to specify attribute selectors using wildcards or regex. So:

    E[foo="warning"]

    matches any E element whose foo attribute equals "warning"; but I want it to match elements whose foo attribute *contains* or *does not contain* a string
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    http://www.w3.org/TR/css3-selectors/...ute-substrings

    Mozilla implements many CSS3 selectors, including those.

  • #3
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Oh, and to answer your question:

    E[foo*="bla"] {
    /* E elements w/ foo attributes containing bla */
    }

    E:not([foo*="bla"]) {
    /* E elements w/o foo attributes containing bla */
    }

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wicked

    I shall have to read-up on CSS3 this weekend ..
    Last edited by brothercake; 03-14-2003 at 06:15 PM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow. That's cool.

    Useful, I think...

    I'll have to look into it, too. Anyone know where I can download ALL information on CSS (to save to floppy)?
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Quiet Storm
    Wow. That's cool.

    Useful, I think...

    I'll have to look into it, too. Anyone know where I can download ALL information on CSS (to save to floppy)?
    Very cool.

    Very useful. The :not() pseudo-class in particular. I've used it often in conjunction with XML applications inside of each other. Example:

    @namespace svg url(http://www.w3.org/2000/svg);

    svg|svg:root {
    /* automatically center document if it is SVG at root */

    margin: 0 auto;
    }

    svg|svg:not(:root) {
    /* inline SVG, style it specially or something */
    }


    As for information on all CSS... I'm not aware of any zipped archive of the CSS3 publications, but CSS1 and CSS2 are both available as a zip or pdf from W3C's site.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Internet Explorer

    Thanks!

    And this all works on (don't laugh) IE5.0+?
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #8
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by Quiet Storm

    And this all works on (don't laugh) IE5.0+?
    Sorry. hahahahahahahahahahah.... no. Of course not. Win/IE doesn't even support any CSS2 selectors other than the descendant (the space) selector, let alone anything from CSS3.

  • #9
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    It also appears that Hyatt has been implementing some more nifty CSS3 selectors in Safari:
    http://www.mozillazine.org/weblogs/h...03.html#002644


  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh

    rock on
    Last edited by brothercake; 03-15-2003 at 02:06 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Follow up ...

    I'm posting this follow up for general interest, to demonstrate what I did with this. It's actually rather useful

    Basically, I wanted to make a print stylesheet with exploded URLs - so that when you print the page, each link is followed by its URL in brackets. But ... there are three types of link on the site; internal links:

    <a href="/folder/page.html">page</a>

    external links:

    <a href="http:///www.othersite.com/">other site</a>

    and target anchors:

    <a name="here" id="here"></a>

    So - I want the internal links to have their domain name prepended, but external links should stay as they are. I also want to make sure that target anchors aren't written at all - otherwise there'd be loads of empty brackets on the page.

    Phew. Long explanation ... for a short piece of code:
    Code:
    a[href*="."]:not([href*="http://"]):after {
    	content:" (http://www.domain.com" attr(href) ")";
    	}
    	
    a[href*="http://"]:after {
    	content:" (" attr(href) ")";
    	}
    which produces this printed text:

    page (http://www.domain.com/folder/page.html)

    other site (http://www.othersite.com/)

    Last edited by brothercake; 08-22-2003 at 06:48 AM.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    And this is why I love Mozilla?
    Safari on Hyatt's box should be able to do that too... you can't help but love the advent of CSS2 and CSS3 aware browsers.

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's fantastic with a capital tastic
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #14
    Regular Coder
    Join Date
    Apr 2003
    Location
    On the W3C and W3schools web sites.
    Posts
    159
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or in drop caps and small caps using CSS

  • #15
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Originally posted by theabyss
    Or in drop caps and small caps using CSS
    You dug up a 5 month-old thread just to say that?


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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