Как добавить сss только 4-рем строкам ?

InstantCMS 2.X
#1 10 декабря 2017 в 14:53
Друзья вывожу из базы 8 строк но нужно сделать так что бы первый 4 строки были красные с помощью css. Какой код нужно написать что бы применить css первым 4 строкам?
#2 10 декабря 2017 в 15:14
возьмите их в див присвойте класс и классу задайте свои настройки. С ваши знаниями и такой вопрос :)
#3 10 декабря 2017 в 15:15
Инстайлер Про решит ваш вопрос v
#4 10 декабря 2017 в 15:26
Можно так
  1. ЭЛЕМЕНТ:nth-child(1),ЭЛЕМЕНТ:nth-child(2),ЭЛЕМЕНТ:nth-child(3),ЭЛЕМЕНТ:nth-child(4){
  2. background-color: red;
  3. }
#5 10 декабря 2017 в 16:45


Можно так

  1. ЭЛЕМЕНТ:nth-child(1),ЭЛЕМЕНТ:nth-child(2),ЭЛЕМЕНТ:nth-child(3),ЭЛЕМЕНТ:nth-child(4){
  2. background-color: red;
  3. }

Sonat

Вот что нужно. Спасибо
#6 10 декабря 2017 в 16:46


возьмите их в див присвойте класс и классу задайте свои настройки. С ваши знаниями и такой вопрос :)

Capitan

Нет это не то там всегда данные меняются местами 5 может пойти на первое и так далее.
#7 10 декабря 2017 в 18:46
Сокращенно, если есть идентификатор у родителя:
родитель > элемент:nth-child(-n+4){стили;}
#8 17 декабря 2017 в 10:47
Мужики, подскажите в чем беда?
css подключаю так: <?php $this->addMainCSS("templates/{$this->name}/css/test.css"); ?>
а код все равно не работает:https://codepen.io/geoffyuen/pen/FCBEg

или может кто пнет в сторону адаптивной таблицы?
#9 17 декабря 2017 в 12:15

css подключаю так:

@Sviridovve
А где (в каком файле) подключаете?
#10 17 декабря 2017 в 12:40
main.tpl.php
#11 17 декабря 2017 в 14:06
Вообщем так и не понял почему файл со стилями не подцепляется, сделал все через одно место. Для примера брал следующий код:
  1.  
  2. <body>
  3. <div class="wrapper">
  4. <div class="table_wrap">
  5. <table class="table">
  6. <thead>
  7. <tr>
  8. <th>Заголовок 1</th>
  9. <th>Наименование</th>
  10. <th>Данные</th>
  11. <th>Характеристики</th>
  12. <th>Большой большой заголовок</th>
  13. <th>Дата</th>
  14. <th>Цена</th>
  15. <th>Преимущества</th>
  16. </tr>
  17. </thead>
  18. <tbody>
  19. <tr>
  20. <td data-label="Заголовок 1"><span>Компьютер</span></td>
  21. <td data-label="Наименование"><span>Мощный компьютер</span></td>
  22. <td data-label="Данные"><span>Супер данные</span></td>
  23. <td data-label="Характеристики">
  24. <ul>
  25. <li>Очень хорошая характеристика 1</li>
  26. <li>Очень хорошая характеристика 2</li>
  27. <li>Очень хорошая характеристика 3</li>
  28. </ul>
  29. </td>
  30. <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
  31. <td data-label="Дата"><span>09.02.2017</span></td>
  32. <td data-label="Цена"><span>100 000 руб.</span></td>
  33. <td data-label="Преимущества"><span>Мы лучше всех</span></td>
  34. </tr>
  35. <tr>
  36. <td data-label="Заголовок 1"><span>Компьютер</span></td>
  37. <td data-label="Наименование"><span>Мощный компьютер</span></td>
  38. <td data-label="Данные"><span>Супер данные</span></td>
  39. <td data-label="Характеристики">
  40. <ul>
  41. <li>Очень хорошая характеристика 1</li>
  42. <li>Очень хорошая характеристика 2</li>
  43. <li>Очень хорошая характеристика 3</li>
  44. </ul>
  45. </td>
  46. <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
  47. <td data-label="Дата"><span>09.02.2017</span></td>
  48. <td data-label="Цена"><span>100 000 руб.</span></td>
  49. <td data-label="Преимущества"><span>Мы лучше всех</span></td>
  50. </tr>
  51. <tr>
  52. <td data-label="Заголовок 1"><span>Компьютер</span></td>
  53. <td data-label="Наименование"><span>Мощный компьютер</span></td>
  54. <td data-label="Данные"><span>Супер данные</span></td>
  55. <td data-label="Характеристики">
  56. <ul>
  57. <li>Очень хорошая характеристика 1</li>
  58. <li>Очень хорошая характеристика 2</li>
  59. <li>Очень хорошая характеристика 3</li>
  60. </ul>
  61. </td>
  62. <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
  63. <td data-label="Дата"><span>09.02.2017</span></td>
  64. <td data-label="Цена"><span>100 000 руб.</span></td>
  65. <td data-label="Преимущества"><span>Мы лучше всех</span></td>
  66. </tr>
  67. </tbody>
  68. </table>
  69. </div>
  70. </div>
  71. <style>
  72. .wrapper {
  73. width: 95%;
  74. max-width: 1000px;
  75. margin: 0 auto;
  76. }
  77. .table {
  78. width: 100%;
  79. border-collapse: collapse;
  80. }
  81. .table td,
  82. .table th {
  83. padding: 5px;
  84. border: 1px solid black;
  85. }
  86. .table td {
  87. position: relative;
  88. }
  89. @media screen and (max-width: 1050px) {
  90. thead {
  91. display: none;
  92. }
  93. .table td {
  94. display: block;
  95. padding-left: 40%;
  96. border: none;
  97.  
  98. }
  99. .table td:nth-child(odd) {
  100. background-color: #ccc;
  101. }
  102. .table td:before {
  103. content: attr(data-label);
  104. position: absolute;
  105. left: 2%;
  106. }
  107. .table tr {
  108. border-bottom: 5px solid black;
  109. }
  110. }
  111. @media screen and (max-width: 600px) {
  112. .table td:before {
  113. position: static;
  114. display: block;
  115. background-color: #ccc;
  116. font-weight: bold;
  117. padding: 10px;
  118. }
  119.  
  120. .table td {
  121. padding: 10px;
  122. text-align: center;
  123.  
  124. }
  125. .table td:nth-child(odd) {
  126. background-color: #fff;
  127. }
  128. }
  129. </style>
  130. </body>
  131.  
  132.  
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.