Pinceladas da WebMovido a: XHTML, CSS, PHP e WebStandards

Para entender a pseudo-classe negação, :not(x), é muito simples, você deve passar um argumento para ela que ficará dentro dos parênteses, exemplo:

* {background-color:#FFFFFF;}
*:not(p) {background-color:#FF0000;}

O que eu defini na regra acima é que tudo no meu documento vai ter um background vermelho, menos tudo que estiver dentro da tag p, como podem ver nesse exemplo. Atualmente funciona no Mozilla, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#negation

O seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.

Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:

h1 ~ pre {border:1px dotted red;}

Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:

<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>

Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#general-sibling-combinators

Com a chegada das CSS3, que ainda estão em desenvolvimento, eu fico a cada dia mais surpreendido com o seu grande potencial, só não fico mais ainda devido a nosso querido amigo Internet Explorer, mas isso é um caso a parte. Hoje tomei conhecimento de mais uma pseudo-classe das CSS3 chamada :target, onde você pode manipular as âncoras da sua página. Para aqueles que não sabem o que é uma âncora em HTML, imagine uma URL com um sinal de tralha (#) seguido de um nome de âncora ou um ID de qualquer elemento, que ao você clicar é levado para o local ou destino indicado no mesmo documento. Esse destino também pode ser chamado de :target, exemplo:

http://www.exemplo.com/top.html#secao_2

O exemplo acima ilustra bem o que foi dito. Agora, se utilizar-mos a pseudo-classe :target podere-mos aplicar qualquer estilo CSS a âncora em questão no momento em que o usuário clicar na mesma. Levem em consideração o seguinte CSS:

*:target { color:#8A7575; background-color:#D0C8C8; border:3px double #000; }
*:target::before { content:url(target.png) }

Agora, abram esse exemplo. Experimentem clicar no link do topo da página, como podem ver, é aplicado os estilos definidos somente a âncora especificada, com isso é possível fazer muita coisa interessante, só basta colocar a cabeça pra funcionar. E lembrando que essa propriedade só funciona nos Browsers baseados no motor Gecko, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#target-pseudo
• http://www.maujor.com/tutorial/seletores-css3.php

Essa pseudo-classe é aplicada a elementos vazios do HTML, ou seja, imagine que você tem uma tag p dessa forma:

<p></p>

Se no CSS você criar uma definição dessa forma:

p:empty { background-color:#FF0000; }

Todos os parágrafos vazios da página ficarão com a cor de fundo vermelha. A primeira impressão pode parecer inútil utilizá-la, mas imagine onde o conteúdo é gerado dinamicamente, seria uma boa pra vc descobrir quais tags estão sem conteúdo. Para que fique mais claro o entendimento do tutorial, dêem uma olhada no seguinte exemplo. Lembrando que só funciona no Mozilla, Konqueror e Safari.

Referências

• http://www.w3.org/TR/css3-selectors/#empty-pseudo
• http://www.quirksmode.org/css/empty.html

São 147 cores com seus respectivos códigos hexadecimais definidos de acordo com a especificação de cores das CSS3, coloquei os arquivos aqui para download em PNG e PDF.

Vi aqui: PageFace.

A cada dia eu fico mais surpreendido com o poder do CSS, e uma propriedade muito interessante do CSS3 que está por vir é o text-overflow, onde ele nos dá a possibilidade de recortar o texto que por exemplo não cabe dentro de um box, e para nos ajudar mais ainda, ele coloca no final da frase 3 pontinhos(…), característica para dizer de que a frase continua. As propriedades disponíveis são as seguintes:

• text-overflow: ellipsis-word;
• text-overflow: clip;

Por exemplo, se pegasse-mos o seguinte texto:

Lorem ipsum dolor sit amet, consectetur

E utilizasse-mos o text-overflow, ele seria renderizado da seguinte forma:

Lorem ipsum dolor sit…

Dessa forma é possível fazer resumos sem usar sequer nenhuma linguagem de programação.