#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    1
    Rep Power
    0

    CSS Sytax Multiple Classes (newbie)


    I'm trying to understand an example from the jQuery Mobile website (I lost the link):

    Code:
    .my-page .ui-listview .ui-li.ui-btn{
      float: left;
      width: 30.9333%; /* 33.3333% incl. 2 x 1.2% margin */
      height: 232px;
      margin: 9px 1.2%;
      border-width: 0; 
     }
    I do not understand that bold part.

    I believe it says that this section of CSS applies to:
    .ui-listview classes that are within .my-page classes.
    ^Is this assumption correct, as far as it goes?

    The part that really throws me is the last bit:
    .ui-li.ui-btn
    I know that .ui-li and .ui-btn are both classes defined in jquery.mobile-1.0.css. But why is there no space between these two when there was a space between .my-page and .ui-listview?


    In the example JSP is:
    Code:
            
    <ul data-role="listview" data-inset="true">         	
    <li><a href="#">             	
    <h2>Home</h2>                 
    <p>News and Info</p>                 
    <p class="ui-li-aside">News</p></a></li>                 
    <li><a href="#"><img src="/images/pic1.jpg">
    ...
    Now, I know that the CSS section I quoted above is being applied to this html. However, this HTML does not contain anything that has the .ui-li or .ui-btn classes. Moreover, it doesn't even have a .ui-listview class. So how come the CSS is applied to this HTML, when the HTML doesn't have all of the classes for that section of CSS?

    So I'm missing something here. Does the '-' symbol mean something that I don't understand?

    If someone can just provide a clear explanation of the full meaning of this line:
    .my-page .ui-listview .ui-li.ui-btn{...}
    I'd be very grateful.
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2013
    Posts
    3
    Rep Power
    0
    To my understanding .my-page .ui-listview .ui-li.ui-btn simply means this:
    It's selecting an element with the classes of ui-bttn and ui-li that are children of an element with the class of ul-listview which is a child of an element with the class of my-page. I'm not sure how it relates to your HTML but that's what they CSS does mean. Hope that's somewhat helpful!

IMN logo majestic logo threadwatch logo seochat tools logo