Seletor de Existência do Atributo

[TeixeiraRamos 4]

Em uma definção de um livro:

É possível usar o Seletor de Existência do Atributo para selecionar elementos que contenham um atributo específico...

Por exemplo, p[title~=atraso] seleciona todos os parágrafos contendo o atributo title. Se o elemento contém o atributo e o valor recebe o atributo...

Padrões: SELETOR [title] {estilo} ou SELETOR [title~=PALAVRA]

 

Diante dessa defição entendi que onde estiver a palavra "atraso" receber os estilos:

 

p[title~=atraso] { background-color:gold; }

 

<p title="atraso">

seleciona todos os parágrafos que contém o atributo atraso.Mas não é isso posso tirar a palvra "atraso" que continuam os

estilos</p>

 

 

E tem o seguinte se locar acento perde o estilo. Exemplo: Mônica

[Bruno Augusto 417]

Experimenta tirar o sinal de til (~).

 

Se funcionar, o til, nesse caso, também significa "pode ou não ter", tal qual quando se opera com classes:

 

p[class=~"classe"]

Casará todos os parágrafos que possuem o atributo class porém quando tiverem mais de uma classe atribuída e uma delas for classe:

 

<p class="classe teste">Conteúdo</p>

[TeixeiraRamos 4]

Não resolveu retirando o til ~.

 

Como já mencionei o exemplo do livro não informa que é opcional o til.

Como, também, informei eu entendi que se eu quero selecionar os elementos dependendo se ele contem um atributo estefífico,

uma palavra especifica dentro de um atributo isso tem que funcionar.

Vamos fazer de conta que desejo que onde conter o nome "Mônica" seja aplicado um estilo diferente dos demais.Não é para isso o Seletor de Atributo? Mas pelo visto não é isso que acontece.

Convém ficar claro que quem testar vai constar que ocorreu a estilização mas se retira o nome "monica" continua estilizado, se retira o nome paragraph...

Salvo, se estou entendendo errado. Se retirarmos o nome "paragraph" do p não teria que desabarecer a estiliza

O exemplo de livro é CSS page.css: (o [title="monica" - é meu)

 

code { white-space:pre; }

 

p[title] { padding:5px 10px; border:1px solid gray; }

p[title~=paragraph] { background-color:gold; }

p[title=#4 paragraph] { font-weight:bold; }

p[title=monica] { color: #FF0000; background: #999999;border-style: solid;border-color: #0000FF; }

 

O example.html

 

<h1>Seletores de Atributo</h1>

 

<p> Este parágrafo não tem o atributo <code>title</code>. </p>

 

 

<p title="Second">

<code>p [title]</code> seleciona todos os parágrafos que contém o atributo title.</p>

 

<p title="Third paragraph">

<code>p[title~=paragraph]</code> seleciona todos os parágrafos com um atributo

title que contenha a palavra <code>paragraph</code>. </p>

 

<p title="#4 paragraph">

<code>p [title-=paragraph]</code> seleciona todos os parágrafos com um atributo

title que contenha aexatamente o texto <code>#4 parágraph</code>.

As combinações são case sensitive e devem combinar letra por letra incluindo o

espaço.</p>

 

<p title="monica">

seleciona todos os parágrafos com um atributo

title que contenha a palavra </p>

 

Estava com o til em:

<p title~="monica">

seleciona todos os parágrafos com um atributo

title que contenha a palavra "monica"</p>

 

Volto a repetir entendi que se manter o nome "monica" a CSS aplica os {ESTILOS}.

Porém, se no parágrafo não conter "monica" não deveria estilizar. Correto? Mas fica tudo igual.

Para que serve atributo?

[Evandro Oliveira 331]

Porém, se no parágrafo não conter "monica" não deveria estilizar. Correto?

errado!

 

 

O que interessa pro CSS é isso aqui:

 

<p title="monica">...</p>

 

note:

<p title="azul">Texto em azul</p>

<p>texto em azul</p>


p[title="azul"] { color: blue }

 

se efetuar o exemplo acima, verá que apenas a primeira frase fica em azul, mesmo contendo a palavra azul nos dois parágrafos, pois isso não interessa, o que interessa é o atributo title=azul

 

 

como o amigo Imaggens já citou, você não precisa se ater ao atributo title, suponhamos que você queira deixar com a borda em vermelho, todas as imagens que não contenham texto alternativo:

 

<img src="imagem.jpg" alt="" title="Eu sou um título para a imagem" />

img[alt=""] { border: red; }

qualquer imagem que leve um texto alternativo diferente de ""(vazio) não terá a borda vermelha.

 

 

Nota: Não funciona em IE8-

[Bruno Augusto 417]

De fato, o que você quer não é possível. Para fazer o que quer envolveria uma programação extra, no Cliente ou no Servidor para casar o texto que quer e envolvê-lo com algum elemento (X)HTML com a classe pré-definida.

 

Um exemplo do lado Servidor, seria com PHP e a DOMDocument onde você recebe a página e analisa cada elemento (tag) dela. Quando encontrasse o elemento certo e dentro do valor do elemento (conteúdo da tag) a determinada palavra, você adiciona o nó (conuunto de tags-pai) inteiro de onde essa palavra se encontra dentro de outro, com o atributo class com o valor da classe desejada.

 

Não vou me estender pois não é o lugar mais adequado.

 

No lado cliente seria com JavaScript, que tem os métodos que retornam todas as tags que desejar.

 

Com CSS PURO não dá, não há nenhum seletor para isso, nem no CSS3. Alguns, se não todos, esses seletores do W3.org,são bem explicados, muciosamente e com exemplos, no Smash Magazine (em inglês, mas bem fácil).