Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2018, 14:20
Интересующийся
Отправить личное сообщение для dfcz112 Посмотреть профиль Найти все сообщения от dfcz112
 
Регистрация: 30.01.2018
Сообщений: 29

Нужен правильный селектор
К примеру, есть таблица
Первые 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;
    }

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

Последний раз редактировалось dfcz112, 29.03.2018 в 14:56. Причина: появилась новая информация
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2018, 16:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dfcz112,
забавно ... помочь не получилось,
Сообщение от dfcz112
querySelector('.below:last-child'), а результатом выдаёт null.
интересно это глюк или есть правильное решение?
вопрос знатокам:
как обратиться к последней строке данного класса?
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2018, 17:56
Аватар для destus
Профессор
Отправить личное сообщение для destus Посмотреть профиль Найти все сообщения от destus
 
Регистрация: 18.05.2011
Сообщений: 1,207

рони,
Чтобы псевдо класс применился к селектору, нужно чтобы элемент с этим классом был последним в общем списке. Отсчет идет и по классам и по строкам, если данный класс не последняя строка, то выборка не произойдет. По сути нужна обертка в виде tbody для групп с разными классами http://plnkr.co/edit/OAh9qPP7qZ2mIOFdvfzA?p=preview
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2018, 18:00
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Псевдокласс :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>


Проверка: []

Последний раз редактировалось Malleys, 19.03.2019 в 21:48.
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2018, 18:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

destus,
Malleys,
Ответить с цитированием
  #6 (permalink)  
Старый 29.03.2018, 19:57
Интересующийся
Отправить личное сообщение для dfcz112 Посмотреть профиль Найти все сообщения от dfcz112
 
Регистрация: 30.01.2018
Сообщений: 29

n-15 не годится, поскольку это исходная пустая таблица. Заполненная она будет обрезана по зелёным полям в случайном виде.
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2018, 00:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dfcz112,
так оберните строки .below в tbody?!
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2018, 01:41
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Если только так:
.below + .above{
    border-*!*top*/!*: 2px solid gray;
}
__________________
29375, 35
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2018, 12:56
Интересующийся
Отправить личное сообщение для dfcz112 Посмотреть профиль Найти все сообщения от dfcz112
 
Регистрация: 30.01.2018
Сообщений: 29

Сообщение от Aetae Посмотреть сообщение
Если только так:
.below + .above{
    border-*!*top*/!*: 2px solid gray;
}
Сработало. Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужен програмист который все знает про дизайн и продвижения сайта! alex7101 Работа 1 28.11.2016 17:59
Помогите составить правильный селектор Manoftheyear jQuery 7 29.07.2016 01:33
Помогите состьавить сложный селектор Кирюха =) (X)HTML/CSS 8 18.01.2014 17:39
Очень нужен скрипт для лёгкого интернет магазина samael Общие вопросы Javascript 3 26.06.2012 10:35
Предыдущий селектор KupueIIIKo jQuery 1 05.10.2011 01:27