Форум

dfcz112 · #1 (**permalink**) 29.03.2018, 14:20

К примеру, есть таблица

Первые 15 строк в ней имеют класс .below, последующие - класс .above.
На картинке видна серая горизонтальная полоса, отделяющая каждые 5 ячеек. Мне нужен селектор, который проведёт такую же полосу на последней строке tr класса .below.
Та полоса, которая проведена, сделана с помощью селектора

.above:nth-child(5n) {
       border-bottom: 2px solid gray;
     }

Я пробую .below:last-child и не работает. Игрался в консоли через querySelector('.below:last-child'), а результатом выдаёт null. Почему?
Я конечно могу и так сделать

table >.above {
      border-top: 2px solid gray;
    }

и будет работать, но, хочется код лишний раз не дублировать, а просто добавить селектор.

рони · #2 (**permalink**) 29.03.2018, 16:52

dfcz112,
забавно ... помочь не получилось,

Сообщение от dfcz112

querySelector('.below:last-child'), а результатом выдаёт null.

интересно это глюк или есть правильное решение?
вопрос знатокам:
как обратиться к последней строке данного класса?

destus · #3 (**permalink**) 29.03.2018, 17:56

рони,
Чтобы псевдо класс применился к селектору, нужно чтобы элемент с этим классом был последним в общем списке. Отсчет идет и по классам и по строкам, если данный класс не последняя строка, то выборка не произойдет. По сути нужна обертка в виде tbody для групп с разными классами http://plnkr.co/edit/OAh9qPP7qZ2mIOFdvfzA?p=preview

Malleys · #4 (**permalink**) 29.03.2018, 18:00

Псевдокласс :last-child представляет элемент, который является последним среди дочерних элементов. (тоже самое, что :nth-last-child(1))

.below:last-child в данном случае ничего не найдёт, поскольку ни один из .below не является последним

Как вариант,

<!doctype html>
<html>
<body>
<script>

	var table = document.createElement("table");

	for(var y = 0; y < 25; y++) {
		var tableRow = document.createElement("tr");
		table.appendChild(tableRow);

		tableRow.classList.add(y < 15 ? "below" : "above");

		for(var x = 0; x < 35; x++) {
			var tableCell = document.createElement("td");
			tableRow.appendChild(tableCell);
		}
	}

	document.body.appendChild(table);
	
</script>
<style>

	table {
		border-collapse: collapse;
		border: 1px solid gray;
	}

	tr {
		border-color: inherit;
	}

	td {
		border: 1px solid;
		border-color: inherit;
		width: 15px;
		height: 15px;
	}

	tr:nth-child(-n + 15) td:nth-child(-n + 15) {
		border-width: 0;
	}

	tr:nth-child(n + 16) td:nth-child(-n + 15),
	tr:nth-child(-n + 15) td:nth-child(n + 16) {
		background-color: #9ad4ac;
	}

	tr:nth-child(5n + 15) td {
		border-bottom-width: 2px !important;
	}

</style>
</body>
</html>

Проверка: [��]

рони · #5 (**permalink**) 29.03.2018, 18:29

destus,
Malleys,

dfcz112 · #6 (**permalink**) 29.03.2018, 19:57

n-15 не годится, поскольку это исходная пустая таблица. Заполненная она будет обрезана по зелёным полям в случайном виде.

рони · #7 (**permalink**) 30.03.2018, 00:44

dfcz112,
так оберните строки .below в tbody?!

Aetae · #8 (**permalink**) 30.03.2018, 01:41

Если только так:

.below + .above{
    border-*!*top*/!*: 2px solid gray;
}

dfcz112 · #9 (**permalink**) 30.03.2018, 12:56

Сообщение от Aetae

Если только так:

.below + .above{
    border-*!*top*/!*: 2px solid gray;
}

Сработало. Спасибо!

Форум

Справочник

Discord чат

Курсы javascript