Выделите каждую вторую строку li цветом фона - PullRequest
Новая
       0

Выделите каждую вторую строку li цветом фона

0 голосов
/ 15 марта 2019

Я хочу изменить цвет фона каждой второй строки li, например, цвет фона ul, который имеет заголовки.Первая строка должна иметь цвет по умолчанию, а затем вторая строка должна иметь пользовательский цвет и т. Д.

Я попытался установить для nth-of-child (even) значение li, но оно не работает должным образом, так как считаетсяотдельный элемент li, а не весь ряд

http://jsfiddle.net/roznfxjL/ 

.widthh {
  width: 100%;
}

.cont {
  background: #f2f2f2;
}

.email {
  display: inline-block;
  list-style: none;
  word-wrap: break-word;
  width: 35%;
  margin-right: 10px;
  vertical-align: top;
  margin-bottom: 20px
}

.subject {
  display: inline-block;
  list-style: none;
  width: 15%;
  vertical-align: top;
  word-wrap: break-word;
  margin-right: 15px;
}

.from {
  display: inline-block;
  list-style: none;
  width: 10%;
  vertical-align: top;
  word-wrap: break-word;
  margin-right: 10px;
}

.action {
  display: inline-block;
  list-style: none;
  width: 10%;
  vertical-align: top;
}
<ul class="widthh cont">
  <li class="email">
    Email
  <li class="subject">
    Subject
  <li class="from">
    From
  </li>
  <li class="action">
    Action
  </li>
</ul>

<ul class="widthh">
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
  <li class="email">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  <li class="subject">
    adipiscing elit, sed do eiusmod tempor
  <li class="from">
    Devid Jon
  </li>
  <li class="action">
    Delete
  </li>
</ul>

1 Ответ

0 голосов
/ 15 марта 2019

Повторяющийся шаблон.
Ваш шаблон можно описать так:
Четыре элемента без фона, затем четыре элемента с фоном и т. Д.
Это означает, что он повторяетсясам каждые восемь элементов .

Вы можете использовать nth-child() для этого 

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ { 
  background: red;
}

С вашим примером: 

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ {
  background: red;
}
<!DOCTYPE html>
<!-- By cupusasa -->
<html>
<head>
	<title></title>
	<style>
	      .widthh{
	      	width: 100%;
	      }
        .cont{
          background: #f2f2f2;
        }
		.email {
			display: inline-block;
			list-style: none;
			word-wrap: break-word;
			width: 35%;
			margin-right: 10px;
			vertical-align: top;
		}
		.subject {
			display: inline-block;
			list-style: none;
			width: 15%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 15px;
		}
		.from {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 10px;
		}
		.action {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
		}
	</style>
</head>
<body>

<ul class="widthh cont">
<li class="email">
Email
<li class="subject">
Subject
<li class="from">
From
</li>
<li class="action">
Action
</li>
</ul>

<ul class="widthh">
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li><li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
</ul>

</body>
</html>

РЕДАКТИРОВАТЬ:

Если вы хотите, чтобы он выглядел больше как строка (такая же высота ли), выможно использовать некоторые flex.

Но тогда вам нужно будет отрегулировать ширину столбцов в соответствии с вашим первым списком. 

.widthh + .widthh li:nth-child(8n+5), /* 5, 13, 21 */
.widthh + .widthh li:nth-child(8n+6), /* 6, 14, 22 */
.widthh + .widthh li:nth-child(8n+7), /* 7, 15, 23 */
.widthh + .widthh li:nth-child(8n+8) /* 8, 16, 24 */ {
  background: red;
}

.widthh + .widthh { 
  display: flex;
  flex-wrap: wrap;
}
.widthh + .widthh li {
  margin: 0;
}
<!DOCTYPE html>
<!-- By cupusasa -->
<html>
<head>
	<title></title>
	<style>
	      .widthh{
	      	width: 100%;
	      }
        .cont{
          background: #f2f2f2;
        }
		.email {
			display: inline-block;
			list-style: none;
			word-wrap: break-word;
			width: 35%;
			margin-right: 10px;
			vertical-align: top;
		}
		.subject {
			display: inline-block;
			list-style: none;
			width: 15%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 15px;
		}
		.from {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
			word-wrap: break-word;
			margin-right: 10px;
		}
		.action {
			display: inline-block;
			list-style: none;
			width: 10%;
			vertical-align: top;
		}
	</style>
</head>
<body>

<ul class="widthh cont">
<li class="email">
Email
<li class="subject">
Subject
<li class="from">
From
</li>
<li class="action">
Action
</li>
</ul>

<ul class="widthh">
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
<li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li><li class="email">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<li class="subject">
adipiscing elit, sed do eiusmod tempor
<li class="from">
Devid Jon
</li>
<li class="action">
Delete
</li>
</ul>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...