Cascading Style Sheets, level 2 (CSS2)

Carlos Guedes — Tue, 22 Feb 2005 21:59:00 +0000

Durante os testes a este novo sistema de weblogs deparei-me com algo “estranho” que fez ver que não percebo nada de CSS . Vou já mostrar o que vi….

  p + p {   text-indent:12px; } body > div {   background-color:#CCC; }

Estão a ver…. quantos de vós é que conhecem esta sintaxe? Eu fiquei baralhado, a pensar que eram mais umas sintaxes malucas que ferramentas como o FP e IE utilizam, mas não…. é CSS.
Bem, estive a investigar um bocado sobre este assunto e descobri esta tabela sobre osselectors.

Pattern	Meaning	Described in section
*	Matches any element.	Universal selector
E	Matches any E element (i.e., an element of type E).	Type selectors
E F	Matches any F element that is a descendant of an E element.	Descendant selectors
E > F	Matches any F element that is a child of an element E.	Child selectors
E:first-child	Matches element E when E is the first child of its parent.	The :first-child pseudo-class
E:link E:visited	Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).	The link pseudo-classes
E:active E:hover E:focus	Matches E during certain user actions.	The dynamic pseudo-classes
E:lang(c)	Matches element of type E if it is in (human) language c (the document language specifies how language is determined).	The :lang() pseudo-class
E + F	Matches any F element immediately preceded by an element E.	Adjacent selectors
E[foo]	Matches any E element with the “foo” attribute set (whatever the value).	Attribute selectors
E[foo="warning"]	Matches any E element whose “foo” attribute value is exactly equal to “warning”.	Attribute selectors
E[foo~="warning"]	Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.	Attribute selectors
E[lang\|="en"]	Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.	Attribute selectors
DIV.warning	HTML only. The same as DIV[class~="warning"].	Class selectors
E#myid	Matches any E element ID equal to “myid”.	ID selectors

Depois disto, e de acordo com os exemplos apresentados na especificação, aprendi que podemos definir coisas como:

Child selectors

  BODY > P { line-height: 1.3 }

Neste exemplo, a regra aplica o estilo a todos os elementos P que são filhos do BODY.

  DIV OL>LI P { line-height: 1.3 }

Neste exemplo, a regra é aplicada aos elementos P que são descendentes de LI; o elemento LI tem que ser filho de um OL; e o elemento OL tem que ser descendente de um DIV.

Adjacent sibling selectors

  H1 + H2 { margin-top: -5mm }

Os selectores deste tipo têm a sintaxe E1 + E2. O selector é aplicado quando os elementos E1 e E2 partilham o mesmo pai e quando o E1 precede imediatamente o E2. No exemplo apresentado, está-se a reduzir o espaçamento vertical que separa um H1 de um H2 que o segue.

Bem, vou ficar por aqui. Para mais informações consultem o documento da especificação.

PS: Já que estamos a falar de CSS não posso deixar de recordar o site do Zen Garden que, para mim, é um hino às CSS.

Carlos Guedes » CSS

Cascading Style Sheets, level 2 (CSS2)