HTML List Style type class 6 (nth child )



index.html


<!DOCTYPE html>
<html>
<head>
    <title>Test</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css" href="style.css">


</head>
<body>

<div class="container">
   
    <div class="row">
        <div class="col-md-6" id="notice">
            <h3 >Notice</h3>
            <ul >
                <li><a href="">Notice 1</a></li>
                    <li><a href="">Notice 2</a></li>
                        <li><a href="">Notice 3</a></li>
                            <li><a href="">Notice 4</a></li>
                                <li><a href="">Notice 5</a></li>
            </ul>
        </div>

        <div class="col-md-6" id="notice">
            <h3 >Notice</h3>
            <ul >
                <li><a href="">Notice 1</a></li>
                    <li><a href="">Notice 2</a></li>
                        <li><a href="">Notice 3</a></li>
                            <li><a href="">Notice 4</a></li>
                                <li><a href="">Notice 5</a></li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>

style.css

 #notice ul{
    padding: 0;margin: 0;
    list-style-type: none;
}
#notice ul li a{
    padding: 5px;
    color: black;
    font-size: 18px;
}
#notice ul li:nth-child(odd){
    background-color:  #bfbfbf;
}
#notice ul li:nth-child(even){
    background-color:  #e6e6e6;
}
#notice ul li:hover{
   background-color:  #ccddff;
}
#header{
    background-color: blue!important;
}

 

 

Thanks for watching

 

Please visit

Basabaribd.com

No comments

Powered by Blogger.