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

Question

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

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

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

Спасибо

Answer 1

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

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

Answer 2

Нет такой функциональности в 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>