Как добавить с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

Инстайлер Про решит ваш вопрос

Сегодня в 17:11

#4 10 декабря 2017 в 15:26

Можно так

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

#5 10 декабря 2017 в 16:45

Можно так

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

Вот что нужно. Спасибо

#6 10 декабря 2017 в 16:46

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

Capitan

Нет это не то там всегда данные меняются местами 5 может пойти на первое и так далее.

#7 10 декабря 2017 в 18:46

Сокращенно, если есть идентификатор у родителя:
родитель > элемент:nth-child(-n+4){стили;}

Dezerit Templates - верстка, шаблоны, дополнения для InstantCMS

#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

Вообщем так и не понял почему файл со стилями не подцепляется, сделал все через одно место. Для примера брал следующий код:

 
<body>
    <div class="wrapper">
        <div class="table_wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>Заголовок 1</th>
                        <th>Наименование</th>
                        <th>Данные</th>
                        <th>Характеристики</th>
                        <th>Большой большой заголовок</th>
                        <th>Дата</th>
                        <th>Цена</th>
                        <th>Преимущества</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td data-label="Заголовок 1"><span>Компьютер</span></td>
                        <td data-label="Наименование"><span>Мощный компьютер</span></td>
                        <td data-label="Данные"><span>Супер данные</span></td>
                        <td data-label="Характеристики">
                            <ul>
                                <li>Очень хорошая характеристика 1</li>
                                <li>Очень хорошая характеристика 2</li>
                                <li>Очень хорошая характеристика 3</li>
                            </ul>
                        </td>
                        <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
                        <td data-label="Дата"><span>09.02.2017</span></td>
                        <td data-label="Цена"><span>100 000 руб.</span></td>
                        <td data-label="Преимущества"><span>Мы лучше всех</span></td>
                    </tr>
                    <tr>
                        <td data-label="Заголовок 1"><span>Компьютер</span></td>
                        <td data-label="Наименование"><span>Мощный компьютер</span></td>
                        <td data-label="Данные"><span>Супер данные</span></td>
                        <td data-label="Характеристики">
                            <ul>
                                <li>Очень хорошая характеристика 1</li>
                                <li>Очень хорошая характеристика 2</li>
                                <li>Очень хорошая характеристика 3</li>
                            </ul>
                        </td>
                        <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
                        <td data-label="Дата"><span>09.02.2017</span></td>
                        <td data-label="Цена"><span>100 000 руб.</span></td>
                        <td data-label="Преимущества"><span>Мы лучше всех</span></td>
                    </tr>
                    <tr>
                        <td data-label="Заголовок 1"><span>Компьютер</span></td>
                        <td data-label="Наименование"><span>Мощный компьютер</span></td>
                        <td data-label="Данные"><span>Супер данные</span></td>
                        <td data-label="Характеристики">
                            <ul>
                                <li>Очень хорошая характеристика 1</li>
                                <li>Очень хорошая характеристика 2</li>
                                <li>Очень хорошая характеристика 3</li>
                            </ul>
                        </td>
                        <td data-label="Большой большой заголовок"><span>Большое большое описание</span></td>
                        <td data-label="Дата"><span>09.02.2017</span></td>
                        <td data-label="Цена"><span>100 000 руб.</span></td>
                        <td data-label="Преимущества"><span>Мы лучше всех</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <style>
    .wrapper {
        width: 95%;
        max-width: 1000px;
        margin: 0 auto;
    }
    .table {
    	width: 100%;
    	border-collapse: collapse;
    }
    .table td,
    .table th {
    	padding: 5px;
    	border:  1px solid black;
    }
    .table td {
    	position: relative;
    }
    @media screen and (max-width: 1050px) {
    	thead {
    		display: none;
    	}
    	.table td {
    		display: block;
    		padding-left: 40%;
    		border:  none;
 
    	}
    	.table td:nth-child(odd) {
    		background-color: #ccc;
    	}
    	.table td:before {
    		content: attr(data-label);
    		position: absolute;
    		left: 2%;
    	}
    	.table tr {
    		border-bottom: 5px solid black;
    	}
    }
    @media screen and (max-width: 600px) {
    	.table td:before {
    		position: static;
    		display: block;
    		background-color: #ccc;
    		font-weight: bold;
    		padding: 10px;
    	}
 
    	.table td {
    		padding: 10px;
    		text-align: center;
 
    	}
    	.table td:nth-child(odd) {
    		background-color: #fff;
    	}
    }
    </style>
</body>

Открытие pdf и эксель на сайте

Панель инструментов - отключит

Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

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

Похожие темы

Как единственному классу присвоить несколько через сss?

[ЕСТЬ РЕШЕНИЕ] Джава скрипт строка выводит NaN

Строка cron после установк системы

[ЕСТЬ РЕШЕНИЕ] Три вопроса по REDACTOR'у

[ЕСТЬ РЕШЕНИЕ] Как добавить возможность выбора группы при регистрации?

Как добавить регионы и города в базу при регистрации.

InstantCMS Team

О проекте

Поддержка

Дополнения