2013-06-05 2 views
0

Как установить стиль только первого div с классом «bla»? (не второй).установить только стиль css первого смежного div с именем класса

<div class="outer"> 
    <div> 
    ....(more div's, unknown how many) 
     <div class="bla"> 
     .... 
     <div class="bla">some content</div> 
     </div> 

    .... 
    </div> 
</div> 
+0

Без дополнительных структурных требований это невозможно. CSS - это правила, нацеленные на элементы внутри структуры документа, и с кодом, который вы показали, нет уникального способа его таргетинга. –

+0

соседний? как два .blas - братья и сестры? или один внутри другого, как в примере, который вы предоставили? – banzomaikaka

+0

Будут ли содержащиеся divs (упоминаемые в разделе «больше div's, unknown how many») без классов в соответствии с вашим примером? Или мы не можем это принять? – n00dle

ответ

1

Вы можете сделать простой обходной путь для этого, так как вы не можете сделать это с помощью какого-либо специального селектора:

.bla { 
    /* style here, example: */ 
    background-color: #f00; 
} 
.bla .bla { 
    /* negate the style, example: */ 
    background-color: transparent; 
} 

Я надеюсь, что это то, что вы искали.

+0

Не совсем то, на что я надеялся, но, наверное, лучший выбор в css. – edbras

+0

JOPLOmacedo предоставил действительный ответ – Jonathan

0

Javascript:

getElementsByClass('bla')[0].style 

EDIT: JOPLOmacedo предоставил CSS только (лучше) ответ

Я также нашел способ, чтобы выбрать, например, второй <p> после <h1> тега:

h1 + p + p{ 
background: red; 
} 

Просто подумал, что я поделюсь этим.

+0

Ха-ха на самом деле первое действующее решение для публикации. Это дерьмовое решение, но только потому, что это дрянная проблема, и это единственное решение этой проблемы. –

+0

Что происходит с голосованием в префектуре? – Jonathan

+0

Я не спускал вниз, но я могу это понять - задано решение CSS, а не решение JS. Но, как я уже сказал, это единственное возможное решение. –

0

В соответствии с чистым css вы не можете выбрать в соответствии с порядком элементов html. Найдите спецификацию (здесь: http://www.w3.org/TR/CSS2/selector.html). Нет ничего, что указывало бы на то, сколько или в каком порядке элементы html соответствуют заданным селекторам.

1

Я предполагаю с этим ответом, что соседними элементами вы подразумеваете элементы брата. Если вы имели в виду элементы parent-child, переходите к ответу N1xx1. Это сказано ...

Вы не можете настроить таргетинг на первый bla с помощью селекторов css. Но вы можете настроить таргетинг на все blas, но в первую очередь. Таким образом, одна из возможностей - установить стили, которые вы хотите, только на первом bla на всех blas. Затем переопределите эти стили, настроив все blas, но первое. Подобно:

.bla { 
    ...styles for the first bla.. 
} 

.bla ~ .bla { 
    ...override styles set on first bla that you dont want on the others 
} 

тильды между «.bla» два "s называется общим Селектором родственного. Если вы никогда не слышали об этом, переходите к css selectors spec.

+1

Прохладный не знал этого! Упрощенный ответ! – Jonathan

Смежные вопросы