SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help with CSS wildcard for selector 3 deep

    I am getting a styled MLS feed from an online source and there is an h1 tag in on all property listing that is oversized. So I want to leverage the Cascading portion of CSS to target the h1 tag in my local Style Sheet. Here is the html feed:
    HTML Code:
    <div id="post-1358762038" class="post">
    <h1>9814 Patton Road, Asheville, NC</h1>
    The DIV id "post-1358762038" is the first selector, then the CLASS "post" is the second selector and "h1" is the third selector.

    The DIV id changes with each property, so some widcard/regular expressions are necessary. I can affect a change with CLASS and H1 tags but it is too generic and it effects other page elements, so I need to target the DIV tag with widcard/regular expressions and the CLASS and H1. The syntax eludes me. Here is my CSS
    Code:
    div[id^="post"] .post h1 {
    	font-family: 'Arial Narrow', 'Helvetica Condensed', Helvetica, Arial, Verdana, sans-serif;  
    	font-size: 21px;
    	line-height: 21px;	
    }
    this page was very helpful, but ?I am trying to string multiple selectors http://circlecube.com/2008/05/using-...stylize-links/
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  2. #2
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove the space between div[id^="post"] & .post so it reads as div[id^="post"].post h1 and it'll work fine. Not exactly sure on the specifics of how the spacing in css works but without the spacing appears as though it's looking for a class attribute of an element nested within the div rather than the class attribute of the selected div.

    Code:
    div[id^="post"].post h1  {
    	font-family: 'Arial Narrow', 'Helvetica Condensed', Helvetica, Arial, Verdana, sans-serif;  
    	font-size: 21px;
    	line-height: 21px;	
    }

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Not exactly sure on the specifics of how the spacing in css works
    The space is effectively the descendant selector

    Sitepoint reference:
    The combinator we use in a descendant selector is a whitespace character: a space, horizontal tab, carriage return, line feed, or form feed. Since whitespace characters are allowed around all combinators, you can include more than one whitespace character between the simple selectors in a descendant selector.

  4. #4
    SitePoint Zealot RyanKing1809's Avatar
    Join Date
    Oct 2011
    Location
    Melbourne, Australia
    Posts
    170
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The space is effectively the descendant selector

    Sitepoint reference:
    Thanks P.

  5. #5
    SitePoint Zealot gregorious's Avatar
    Join Date
    Aug 2006
    Location
    Honolulu, HI
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Removing the space did effect the MLS listing tag, but it also affected all other H1 tags on the site. so my patch is to yeild the H1 tag to the MLS feed, and create an H0 (zero) selector and change all other H1 tags to H0.
    G. Armento - Design, Multimedia, Illustration, Photography
    -------------------------------------------------------
    www.communications-by-design.com

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by gregorious View Post
    and create an H0 (zero) selector and change all other H1 tags to H0.
    There is no H0 tag - unless you meant something else?

    You should really only have one h1 tag on a site anyway as that is the main heading. You can occasionally make a case for more than one h1 but they are very rare.

    If you wanted to target the first h1 that follows the div with the id you could use :first-of-type (ie9+, Firefox, Chrome).

    e.g.
    Code:
    div[id^="post"].post h1:first-of-type  {etc....}


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
  •