CSS селектор, чтобы скрыть первый из набора

Question

Для начала я не имею никакого контроля над HTML.Я ищу решение CSS.CSS2 / 3 в порядке.Я понятия не имею, почему я не могу понять это, но эй, это пятница.Я думаю, что мой мозг зашифрован.

http://jsfiddle.net/mrtsherman/PDBmU/13/

Мне нужно скрыть span.smalltext, содержащий (Documentation xxx).В скрипке я выделил это красной рамкой.

<div class="result">                       
  <span class="icon icon-page" title="Page">Page:</span>
  <a href="/display/">Create</a>
  <!-- Hide this span -->
  <span class="smalltext" style="border: 1px solid red;">
    (<a href="/display/doc">Documentation x.x.x</a>)
  </span>    
  <br>
    ... <span class="search-highlight"><strong>search</strong></span> project ...         
  <br>
  <span class="smalltext">    
    Jun 17, 2011 14:57
  </span>
</div>
<!-- ## The above structure is repeated many times. I would like to hide all of them.  -->

Я пробовал что-то подобное до сих пор - но это не сработало

div.result span.smalltext:first-child {display: none;}

Answer 1

Мне просто нужен правильный селектор.
Что-то вроде div.result span.smalltext:first-child {display: none;}

См. Этот ответ, почему ваша попытка не сработала: Почему не этот CSS: селектор первого ребенка работает?

Используйте взамен .result > span:first-child + a + .smalltext.

Этот селектор будет работать во всех браузерах (кроме IE6).

Answer 2

.result span:nth-of-type(2) {display:none}

тоже работает ... хотя и грязно, как: P

Answer 3

Может ли ...

.result a + .smalltext {
    display:none;
}

... сделать это?Я также сделал демо jsFiddle

Answer 4

Два разных подхода, я бы сказал, CSS или jQuery. CSS:

.result span:nth-of-type(2) {font-weight:bold;}

JS:

$('.result').each(function(){
    $(this).find('.smalltext:first').css('background-color', 'red');
});

Пока HTML действительно не изменится. Fiddle'd это тоже http://jsfiddle.net/PDBmU/19/

/ редактировать Очевидно, что атрибуты css, приведенные в этом примере, предназначены для демонстрации, вам нужно будет отобразить: none; или дисплей: скрытый; в зависимости от желаемого выхода

Answer 5

Я не уверен, насколько это стабильно, так как ваш вывод может содержать много a + span с, но это должно работать с вашим примером

.result > a + span {
  display: none;
}