SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Syntax in Kickstart framework

    The Kickstart framework includes this CSS. *[class*="col_"]{}

    I have not been able to find an explanation. Could someone help please?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Lynnec View Post
    *[class*="col_"]{}
    There's a couple of things happening here. Firstly, at the start, the * is the "universal selector", which targets all elements. The next bit qualifies it, though. It's an "attribute selector". It's targeting any element with a class that contains the string "col_". So the whole rule will target any element that has a class name that includes "col_".

    So, for example, the rule would target all of these—

    Code:
    <div class="col_1"></div>
    <p class="col_4"></p>
    <span class="col_three"></span>
    <div class="three_col_section"></div>
    This code

    Code:
    [class*="col_"]
    with the * looks for the "col_" string anywhere within the class name, whereas

    Code:
    [class^="col_"]
    targets any element whose class begins with "col_", and

    Code:
    [class$="col_"]
    targets an element with a class name ending with "col_".

  3. #3
    SitePoint Member
    Join Date
    Jan 2010
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much for your prompt and excellent explanation.


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
  •