Вопрос по css, css-selectors – Применить стиль к первому элементу в ряду похожих элементов

1

У меня есть следующий список (номера только для справки)

<div class="A">alpha1</div>
<div class="B">alpha2</div>
<div class="A">alpha3</div>
<div class="A">alpha4</div>
<div class="A">alpha5</div>
<div class="B">alpha6</div>
<div class="A">alpha7</div>

Я хочу применить один стиль к DIVS 1, 3 и 7, потому что они являются первыми в своем классе (A) в ряду элементов одного и того же класса. Есть ли для этого псевдоэлемент / магия? Что-то вроде (изобретая)

not(.A) & .A {color:red} -> if class is A and it is not preceded by an A

Спасибо!

Ваш Ответ

3   ответа
4

Вы используете:not() псевдокласс с соседним братским комбинатором+ чтобы соответствовать.A это не сразу предшествует.A:

:not(.A) + .A

Вам также нужно будет использовать:first-child выбрать самый первый.A элемент, так как ему ничего не предшествует:

.A:first-child

Объедините их, и вы получите:

:not(.A) + .A, .A:first-child { color: red; }

jsFiddle demo

Это выглядит как правильное решение CSS. Это вызывающе то, что вы должны делать, если вам не нужно поддерживать старые браузеры. Benjamin Gruenbaum
Ух ты, потрясающе! Благодарю вас! Hans Fledermaus
1

Вот пример:

div:not(.A) + .A, .A:first-of-type{
color:red;
}
3

http://jsfiddle.net/YhvGw/
function applyStyleToFirstDiv(className, styleAttr, val,baseSelector) {
    //Allow to specify a base element to search in
    if(baseSelector == null){
        baseSelector = document    
    }
    var divElements = baseSelector.getElementsByTagName("div"),
        len = divElements.length;
    var prevWas = false,currentIs;
    // Go through all the divs
    for (var i = 0; i < len; i++) {
        var cur = divElements[i];
        var classes = cur.className.split(" ");
        currentIs = false;
        for (var j = 0; j < classes.length; j++) {
            //If you find a matching class
            if (classes[j] === className) {
                currentIs = true;
                break;
            }
        }
        //If the current one matches, and the last one didn't, apply the style, otherwise don't
        if(currentIs && !prevWas){
            cur.style[styleAttr] = val;    
        }
        prevWas = currentIs;

    }
}
//usage sample
applyStyleToFirstDiv("A","color","yellow");
@BoltClock Я добавил решение JavaScript. Ваш чистый CSS кажется нормальным. Benjamin Gruenbaum
@BoltClock, подожди, да, я только что понял вопрос. Исправить грядет Benjamin Gruenbaum
Я тоже опубликовал ответ. Это на самом деле довольно просто, если поддержка браузера не является проблемой, но я хотел бы увидеть, что вы можете придумать, используя JS, поскольку это не может быть легко сделано с помощью чистых селекторов CSS2. BoltClock♦
При этом также выбирается только самый первый дочерний элемент, а не первый в кластере. BoltClock♦
Это работает, только если он знает, каким детям нужен стиль заранее. Я думаю, что он действительно хочет сделать так, чтобы браузер понял это сам, чтобы его не нужно было настраивать, если содержимое меняется. user1618143

Похожие вопросы