Atribuir estilo à um elemento...

[Bruno Augusto 417]

Essa foi uma idéia que me ocorreu para não usar estilo inline e nem criar mais uma classe só para isso.

 

Parece que não é possível. Quero apenas confirmar.

 

Dada a seguinte estrutura:

 

<ul class="btn-group">

 <a class="btn btn-primary">Elements</a>

 <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
 </a>

 <ul class="dropdown-menu">

   <li class="active"><a href="#fooPanel" data-toggle="tab">Foo</a></li>
   <li><a href="#barPanel" data-toggle="tab">Bar</a></li>
   <li><a href="#baazPanel"  data-toggle="tab">Baaz</a></li>

 </ul>

</ul>

Seria possível atribuir algum estilo ao ul se dentro dele houver algum a com a classe dropdown-toggle ou outro ul (tanto faz)?

 

Esse esquema de marcação e estilos é parte do Twitter Bootstrap para Botões com Dropdown.

 

Se eu me esforçar para que botão-dropdown seja sempre o primeiro elemento da lista, eu até consigo fazer a primeira parte com:

 

ul.btn-group:first-child

Só que nem sempre o botão-dropdown será o primeiro e tampouco o único.

 

Eventualmente eu posso ter um botão simples entre dois botões-dropdown (exemplo ridiculamente hipotético)

[Marco Bruno 19]

Boa tarde, Bruno Augusto.

 

Não conseguir entender sua dúvida.

[Evandro Oliveira 331]

Essa foi uma idéia que me ocorreu para não usar estilo inline e nem criar mais uma classe só para isso.

 

Parece que não é possível. Quero apenas confirmar.

 

Dada a seguinte estrutura:

 

<ul class="btn-group">

 <a class="btn btn-primary">Elements</a>

 <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
   <span class="caret"></span>
 </a>

 <ul class="dropdown-menu">

   <li class="active"><a href="#fooPanel" data-toggle="tab">Foo</a></li>
   <li><a href="#barPanel" data-toggle="tab">Bar</a></li>
   <li><a href="#baazPanel"  data-toggle="tab">Baaz</a></li>

 </ul>

</ul>

Seria possível atribuir algum estilo ao ul se dentro dele houver algum a com a classe dropdown-toggle ou outro ul (tanto faz)?

 

Esse esquema de marcação e estilos é parte do Twitter Bootstrap para Botões com Dropdown.

 

Se eu me esforçar para que botão-dropdown seja sempre o primeiro elemento da lista, eu até consigo fazer a primeira parte com:

 

ul.btn-group:first-child

Só que nem sempre o botão-dropdown será o primeiro e tampouco o único.

 

Eventualmente eu posso ter um botão simples entre dois botões-dropdown (exemplo ridiculamente hipotético)

 

Infelizmente, só com CSS não. Você precisaria de um seletor de ancestrais o que, por enquanto, não existe.

[Bruno Augusto 417]

Pois é, confirmado então.

 

Mas só para constar, eu oi que tal seletor não foi implementado devido ao alto consumo de processamento que ele traria.

 

Verdade? Em que sentido?

[Evandro Oliveira 331]

Pois é, confirmado então.

 

Mas só para constar, eu oi que tal seletor não foi implementado devido ao alto consumo de processamento que ele traria.

 

Verdade? Em que sentido?

 

A implementação mais comum dos seletores CSS é a conversão em XPATH, levando a leitura dos elementos/atributos da direita para a esquerda. Assim,

 

body div p span b i

 

Começa primeiro procurando pelos elementos I e começa a filtrar, apenas os que estejam dentro de B, depois os que estejam dentro de SPAN, depois os que estejam dentro de P, depois dentro de DIV e por último, os que estejam dentro de um BODY.

 

Você vai escalando o elemento à extrema direita, satisfazendo aos requisitos à esquerda.

 

Supondo que o seletor seja <

 

numa regra

 

p < span

 

Você teria que inverter a regra, partir do P em toda a sua árvore de descendência para verificar a existência do conteúdo à direita.

 

Ainda

 

div p < span

 

deveria te retornar o ancestral DIV ou P? Se pensar no P, numa analogia ao seletor descendente direto ( > ), como eu faria para aplicar as regras de duplas interpretações??

[Bruno Augusto 417]

Certo, são decisões demais para ele tomar sozinho.

 

Mesmo que eu esteja fugindo do escopo da sala (e do tópico), porque com o JavaScript não tem esse problema? O motor do JavaScript é mais eficaz quanto à interpretação das regras?

[Kaue Machado 0]

Não sei se te ajuda, mas com jquery você poderia fazer assim:

$(document).ready(function(){
  if($('ul.btn-group > a.dropdown-toggle').lenght > 0){

     $(this).parent().addClass(NomeDaClasse);
     //Poderia ser $(this).parent().css({});

  }
});

 

Espero que tenha ajudado

[Bruno Augusto 417]

Agradeço pela ajuda Kaue, mas com JavaScript é fácil. Para finalizar o tópico queria apenas saber o porquê.

 

Sempre imaginei que interpretar e executar uma instrução CSS seria mais eficaz do que JavaScript, mas nenhum artigo que encontrei mencionava o motivo deste seletor hipotético ser tão mais ineficiente.

[Evandro Oliveira 331]

Agradeço pela ajuda Kaue, mas com JavaScript é fácil. Para finalizar o tópico queria apenas saber o porquê.

 

Sempre imaginei que interpretar e executar uma instrução CSS seria mais eficaz do que JavaScript, mas nenhum artigo que encontrei mencionava o motivo deste seletor hipotético ser tão mais ineficiente.

 

Vamos colocar jQuery/Sizzle de lado por um instante, certo??

 

Outro ponto importante é ignorar implementações não usuais. Vou me ater em como Gecko, Presto e, principalmente, Webkit se comportam.

 

No momento que o browser recebe a markup, há o parse onde alguns ajustes - quando necessários - são feitos e a estrutura DOM é conhecida.

 

Coloca-se as CSS's no HEADER para que, de posse das regras, a aplicação siga o fluxo de parse do HTML. Assim que o parser do DOM encerra um elemento, remete-se às regras CSS e verifica-se este - veja, o último - elemento atende a alguma regra CSS.

 

Este é o principal motivo da leitura das CSS/XPATH se darem da direita para a esquerda.

 

Escalar os ancestrais via JavaScript é explícito. Não temos o problema de dupla interpretação proposto no meu último post. Um HTMLElement possui a propriedade parentNode que remete ao elemento pai e fim.

 

Uma implementação que - acredito eu - poderia ser viável é a criação de um pseudo-elemento

 

el::parent { }

 

Isso deveria retornar exatamente o mesmo elemento que el.parentNode retorna. A questão é que as CSS existem exatamente para ter flexibilidade e esta abordagem amarra um pouco um comportamento que deveria ser genérico.

 

Tentando responder à sua pergunta de forma mais direta, DOM é lento sim, uma das YUI performance rules é diminuir o número de elementos. E o acesso a ancestrais não possui o mesmo problema da possível implementação em CSS porque, via DOM, o acesso ancestral é direto e explícito.