Ориентация экземпляра первого класса на странице с помощью CSS

У меня есть куча divs с классом showreel, и я бы хотел, чтобы первый имел более высокое значение маржи. Я пытаюсь достичь этого с помощью расширенных селекторов CSS, но, похоже, не понимаю.

Я знаю, что вы можете ориентировать собственные элементы, такие как р: первый-ребенок но я могу использовать его для классов div, например. .showreel: первая

Посмотрел вокруг совсем немного, но я просто нахожу информацию о родных элементах. Любая помощь оценивалась, но скорее имела бы решение CSS и решение JS.

Спасибо

Ответ 1

В CSS нет такой функциональности. Вам нужно будет использовать решение JS, чтобы найти их на клиентской машине или серверное решение, чтобы применить дополнительный класс к первому элементу с этим классом CSS. Что нужно использовать, зависит от того, насколько важно стилизовать этот элемент уникально.

Используя jQuery, вы можете найти первый экземпляр класса с помощью:

var firstAsJQueryObject = $('.showreel').eq(0);
var firstAsDOMElement   = $('.showreel')[0];

Использование чистого JavaScript в современных браузерах:

var firstAsDOMElement = document.querySelector('.showReel');

Использование чистого JavaScript в старых браузерах:

function findFirstElementWithClass(className){
  var hasClass = new RegExp("(?:^|\\s)"+className+"(?:\\s|$)");
  for (var all=document.getElementsByTagName('*'),len=all.length,i=0;i<len;++i){
    if (hasClass.test(all[i].className)) return all[i];        
  }
}
var firstAsDOMElement = findFirstElementWithClass('showReel');

Если вы собираетесь использовать JavaScript, вместо применения визуального стиля через JavaScript я бы предложил применить класс с использованием JavaScript и по-прежнему использовать CSS для стилирования элемента:

// Using jQuery for simplicity
$('.showreel').eq(0).addClass('first-showreel');

.first-showreel {
  /* apply your presentation here */
}

Изменить. Обратите внимание, что ответ на более высокий голос от @mickey_roy неверен. Он будет работать только тогда, когда элемент с классом, который вы хотите, также является первым элементом его типа на странице.

Запись .showreel:nth-of-type(1) означает: "Найдите мне первый элемент с каждым именем класса, который также имеет класс showreel". Если один и тот же тип элемента появляется ранее на странице без класса, он будет терпеть неудачу. Если другой тип элемента разделяет один и тот же класс, он не работает.

В вопросе спрашивается, как выбрать первый экземпляр класса. Ниже приведен пример того, как очень плохо ответ на этот вопрос.

div { color:red }
.showreel:nth-of-type(1) {
    font-weight:bold;
    color:green
}

<div>not this</div>
<div class="showreel">this should be green</div>
<div>not this</div>
<div class="showreel">not this</div>
<p class="showreel">not this</p>
<section class="showreel">not this</section>

Ответ 2

Я использовал эту статью из CSS-Tricks, чтобы выбрать первый экземпляр класса, а не его дочерний элемент. Он работал блестяще для меня! Никаких дополнительных HTML или JS не требуется.

.title:nth-of-type(1){
    background-color:red;
}