CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Slowboy
Slowboy

Reputation: 601

:nth-child not working with list-style:none;

I'm making a playlist. I want the songs to appear in a striped list.

to do that I'm using this css 

.track-list > ul > li{
  list-style: none;

}    

div ul li:nth-child(even) {
       background-color: #ccc;
    }

this is not working at all, but this code below works.

  .track-list > ul > li{
  list-style: none;

}
    div ul li:nth-child(even) {
      color: #ccc;
    }

But if I remove the .track-list > ul > li{list-style: none;} the 

div ul li:nth-child(even) {
   background-color: #ccc;
}

is working properly.

here is a screenshot from my browser screenshot

this puzzles me allot and every advice would be welcome

Run the snippet full screen to see the issue, the background-color will disappear

@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.wrapper{
  height: 100vh;
}

.box-item{
  position: relative;
  width: 100%;
  background-color: red;
  color: blue;
  height: 10vh;
  margin-top: 40px;

}

footer > .listen{
  position: absolute;
  margin-right: 20px;
  bottom: 0;
  right: 0;
}

.playlist-dropdown{
  border: solid 1px #dedede;
}

.interface{
  border-bottom: solid 3px #dedede;
  padding-bottom: 10px;
  padding-top:10px;
}
.name-of-song{
  margin-bottom: 10px;
}

.track-list{
   padding-top: 10px;
}

.track-list > ul > li{
  list-style: none;

}

div ul li:nth-child(even) {
   background-color: #ccc !important;
}



#play, #pause, #mute, #unmute {
  position: relative;
   display: block;
}

#play {
    position: absolute;

}

#pause:before {
    position: absolute;

}

#pause:after {
    position: absolute;

}



#mute{
    position: absolute;

}

#unmute:before {
    position: absolute;

}

#unmute:after {
    position: absolute;
    
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>playlist</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

     <div class="wrapper">
       <div class="container">
         <div class="box-item ">
           <footer>
             <a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
           </footer>
         </div>

        <div id="playlist-collapse" class="playlist-dropdown">
          <div class="interface clearfix">

            <div class="col-md-12 name-of-song">
              Name of track being played
            </div>
              <div class="col-md-2">
                <a href="#" id="play"><span class="glyphicon glyphicon-play"></span></a>
              <a href="#" id="pause" style="display: none;"><span class="glyphicon glyphicon-pause"></span></a>
              </div>
              <div class="col-md-6">
                progress bar
              </div>
              <div class="col-md-1">
                <a href="#" id="mute"><span class="glyphicon glyphicon-volume-off"></span></a>
              <a href="#" id="unmute" style="display: none;"><span class="glyphicon glyphicon-volume-up"></span></a>
              </div>
              <div class="col-md-3">
                volume-bar
              </div>

          </div> <!--interface ends -->
          <div class="track-list clearfix">
          <ul>
            <li class="track-row">
              <div class="col-md-2 track-number">
                01
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name
              </div>
              <div class="col-md-1 track-copyright">
                	&copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                02
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name 02
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                03
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name03
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
          </ul>
        </div>


     </div>

   </div><!--container-->

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
$('#play').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});

$('#unmute').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#mute').show();
    $('#unmute').hide();
});

$('#mute').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#mute').hide();
    $('#unmute').show();
});
</script>
 </div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 3

Views: 419

Answers (2)

Andrew Li
Andrew Li

Reputation: 1055

That issue had caused by the li had the height 0 when the size is bigger than 991px because of floated div has col-* class.
You use the bootstrap and col-md-x has the float property when the screen size is bigger than 991px.
So you have to set the property overflow:hidden to li to wrap the floated child's content.
Try using like this. 

.track-list > ul > li{
  list-style: none;
  overflow:hidden;
 }

The below code is the fixed one. 

@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.wrapper{
  height: 100vh;
}

.box-item{
  position: relative;
  width: 100%;
  background-color: red;
  color: blue;
  height: 10vh;
  margin-top: 40px;

}

footer > .listen{
  position: absolute;
  margin-right: 20px;
  bottom: 0;
  right: 0;
}

.playlist-dropdown{
  border: solid 1px #dedede;
}

.interface{
  border-bottom: solid 3px #dedede;
  padding-bottom: 10px;
  padding-top:10px;
}
.name-of-song{
  margin-bottom: 10px;
}

.track-list{
   padding-top: 10px;
}

.track-list > ul > li{
  list-style: none;
  overflow:hidden;
}

div ul li:nth-child(even) {
   background-color: #ccc !important;
}



#play, #pause, #mute, #unmute {
  position: relative;
   display: block;
}

#play {
    position: absolute;

}

#pause:before {
    position: absolute;

}

#pause:after {
    position: absolute;

}



#mute{
    position: absolute;

}

#unmute:before {
    position: absolute;

}

#unmute:after {
    position: absolute;
    
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>playlist</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

     <div class="wrapper">
       <div class="container">
         <div class="box-item ">
           <footer>
             <a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
           </footer>
         </div>

        <div id="playlist-collapse" class="playlist-dropdown">
          <div class="interface clearfix">

            <div class="col-md-12 name-of-song">
              Name of track being played
            </div>
              <div class="col-md-2">
                <a href="#" id="play"><span class="glyphicon glyphicon-play"></span></a>
              <a href="#" id="pause" style="display: none;"><span class="glyphicon glyphicon-pause"></span></a>
              </div>
              <div class="col-md-6">
                progress bar
              </div>
              <div class="col-md-1">
                <a href="#" id="mute"><span class="glyphicon glyphicon-volume-off"></span></a>
              <a href="#" id="unmute" style="display: none;"><span class="glyphicon glyphicon-volume-up"></span></a>
              </div>
              <div class="col-md-3">
                volume-bar
              </div>

          </div> <!--interface ends -->
          <div class="track-list clearfix">
          <ul>
            <li class="track-row">
              <div class="col-md-2 track-number">
                01
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name
              </div>
              <div class="col-md-1 track-copyright">
                	&copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                02
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name 02
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li>
              <div class="col-md-2 track-number">
                03
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name03
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
          </ul>
        </div>


     </div>

   </div><!--container-->

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
$('#play').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});

$('#unmute').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#mute').show();
    $('#unmute').hide();
});

$('#mute').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#mute').hide();
    $('#unmute').show();
});
</script>
 </div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272919

The issue is with float. The li is getting collpased (height:0) because inside you are using col-* class without row. You need to consider row so that float elements (the col-*) are correctly cleared then row inside container to get the correct margin (https://getbootstrap.com/docs/3.3/css/#grid)

@import url("//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");


.wrapper{
  height: 100vh;
}

.box-item{
  position: relative;
  width: 100%;
  background-color: red;
  color: blue;
  height: 10vh;
  margin-top: 40px;

}

footer > .listen{
  position: absolute;
  margin-right: 20px;
  bottom: 0;
  right: 0;
}

.playlist-dropdown{
  border: solid 1px #dedede;
}

.interface{
  border-bottom: solid 3px #dedede;
  padding-bottom: 10px;
  padding-top:10px;
}
.name-of-song{
  margin-bottom: 10px;
}

.track-list{
   padding-top: 10px;
}

.track-list > ul > li{
  list-style: none;

}

div ul li:nth-child(even) {
   background-color: #ccc !important;
}



#play, #pause, #mute, #unmute {
  position: relative;
   display: block;
}

#play {
    position: absolute;

}

#pause:before {
    position: absolute;

}

#pause:after {
    position: absolute;

}



#mute{
    position: absolute;

}

#unmute:before {
    position: absolute;

}

#unmute:after {
    position: absolute;
    
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>playlist</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet" href="css/custom.css">
  </head>
  <body>

     <div class="wrapper">
       <div class="container">
         <div class="box-item ">
           <footer>
             <a class="listen" data-toggle="collapse" href="#playlist-collapse"><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span></a>
           </footer>
         </div>

        <div id="playlist-collapse" class="playlist-dropdown">
          <div class="interface clearfix">

            <div class="col-md-12 name-of-song">
              Name of track being played
            </div>
              <div class="col-md-2">
                <a href="#" id="play"><span class="glyphicon glyphicon-play"></span></a>
              <a href="#" id="pause" style="display: none;"><span class="glyphicon glyphicon-pause"></span></a>
              </div>
              <div class="col-md-6">
                progress bar
              </div>
              <div class="col-md-1">
                <a href="#" id="mute"><span class="glyphicon glyphicon-volume-off"></span></a>
              <a href="#" id="unmute" style="display: none;"><span class="glyphicon glyphicon-volume-up"></span></a>
              </div>
              <div class="col-md-3">
                volume-bar
              </div>

          </div> <!--interface ends -->
          <div class="track-list clearfix">
          <ul class="container-fluid">
            <li class="track-row row">
              <div class="col-md-2 track-number">
                01
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name
              </div>
              <div class="col-md-1 track-copyright">
                	&copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li class="row">
              <div class="col-md-2 track-number">
                02
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name 02
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
            <li class="row">
              <div class="col-md-2 track-number">
                03
              </div>
              <div class="col-md-7 track-name">
                Track name/ song name03
              </div>
              <div class="col-md-1 track-copyright">
                  &copy;
              </div>
              <div class="col-md-2 track-duration">
                00:25s
              </div>
            </li>
          </ul>
        </div>


     </div>

   </div><!--container-->

   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>


<script>
$('#play').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#pause').show();
    $('#play').hide();
});

$('#pause').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#pause').hide();
    $('#play').show();
});

$('#unmute').on('click', function(event) {
		console.log('play click clicked');
    //currentPlayingTrack.play();

    $('#mute').show();
    $('#unmute').hide();
});

$('#mute').on('click', function(event) {
    //currentPlayingTrack.pause();
    $('#mute').hide();
    $('#unmute').show();
});
</script>
 </div> <!--wrapper -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Why list-style is affecting this?

When list-style is different from none, we have the bullets that add a default height to the li element even if the element is empty or contains float elements without clearfix. Using none will remove this height and we have issues:

ul {
  border: 1px solid;
}

span {
  float: left;
}

li:nth-child(even) {
  background: red;
  color: blue;
}
<ul>
  <li>element 1</li>
  <li></li>
  <li>element 3</li>
</ul>

<ul style="list-style:none">
  <li>element 1</li>
  <li></li>
  <li>element 3</li>
</ul>

<ul>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
</ul>

<ul style="list-style:none">
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
  <li><span>float element 1</span></li>
</ul>

Upvotes: 2

Related Questions