0





62

Advertisement

I have just started learning css. I have assumed that a class is a way of grouping styling information.

I'm trying to understand CSS pagination. In the example, it is written

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li { display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

pagination is a class. what does it mean when they write ul.pagination li and ul.pagination li a?

ul.pagination li a has a float left; style. what will this achieve?

Question author S-lakshmi | Source

Advertisement


0


When you have the following code block in your HTML document:

<ul class="pagination">
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
</ul>

and you would like the style this list, list items, and the links separately.

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

The CSS block above will affect your list (<ul></ul>).

ul.pagination li { 
   display: inline;
}

This one will affect each list item (<li></li>) in your list.

ul.pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}

and the last one will affect each link (<a></a>) inside of your list items.

float: left is used to have a horizontal list (for example menu). You can learn more from this link: http://www.w3schools.com/cssref/pr_class_float.asp

Lastly, I also suggest you to read the CSS Selectors in order to understand the logic: http://www.w3schools.com/cssref/css_selectors.asp

Answer author Kaan-burak-sener