Articles of css selectors

CSS: estilo uma checkbox de seleção para se parecer com um botão, há um foco?

Eu criei um pequeno botão para exibir em vez de uma checkbox de seleção. Eu queria saber se havia uma maneira de também ter um: hover look de alguma forma? obrigado http://jsfiddle.net/zAFND/2/

Seletor de CSS para <input type = “?”

Existe alguma maneira com CSS para direcionar todos os insumos com base em seu tipo? Eu tenho uma class desativada que uso em vários elementos de formulário desativados e estou definindo a cor do plano de fundo para checkboxs de texto, mas não quero que minhas checkboxs de seleção obtenham essa cor. Eu sei que […]

CSS3 combinando seletores com OU em vez de E

Dado este seletor: body[class*=”page-node-add-“][class~=”page-node-edit”] {background:red;} Ele corresponderá a um corpo que tenha uma class que contenha uma substring de page-node-add- E uma class que seja exatamente editada por nós de página Eu gostaria de dizer combinar o primeiro ou o segundo (mas não ambos). É possível? O problema com o uso de uma vírgula: Se […]

Selecione n-filho entre vários pais

Eu tenho a seguinte marcação: one two three four Desejo estilizar “um” e “três”. No entanto, a marcação também pode ser: one two three four Eu tentei usar o seguinte CSS: .foo li:nth-child(1), .foo li:nth-child(3) { color:red; } No entanto, como esperado, isso é denominar o primeiro filho de cada ul . (Demo: http://jsfiddle.net/hTfVu/ ) […]

Como mostrar apenas certas partes com CSS para impressão?

Eu tenho uma página com muitos dados, tabelas e conteúdo. Eu quero fazer uma versão impressa que mostrará apenas algumas poucas coisas selecionadas. Em vez de escrever outra página apenas para impressão, eu estava lendo sobre o recurso do CSS para “@media print”. Primeiro, quais navegadores suportam isso? Como esse é um recurso interno, tudo […]

Combinar atributos de CSS e seletores de pseudoelemento?

Como posso combinar um seletor de pseudoelemento ( :after ) com um seletor de atributos ( [title] )? Eu tentei usar div[title]:after , mas isso não funciona no Chrome. HTML: This div has a title. This div does not have a title. CSS: div:after { content: “NO”; } div[title]:after { content: “YES”; } Demonstração: http://jsfiddle.net/jmAX6/ […]

MENOS CSS: abusando do & Operator quando nested?

Menos usa o & Operator para aumentar as possibilidades de aninhamento . .header { color: black; .navigation { font-size: 12px; &.class { text-decoration: none } } } o que causa uma substituição do & com o seletor pai e resulta em uma concatenação do seletor real para o seletor pai: .header .navigation.class vez do acréscimo […]

Combinando: não () seletores em CSS

Estou tentando selecionar todos os elementos tr dentro de uma table , exceto o terceiro e o quarto. Eu consegui fazer isso usando: #table tr:not(:nth-child(3)):not(:nth-child(4)) Eu gostaria de combinar esses seletores porque eu tenho mais algumas inputs :nth-child . Algo parecido com isto, mas não funcionou: #table tr:not(:nth-child(3), :nth-child(4)) Isso funciona no jQuery, mas não […]

Por que o document.querySelectorAll retorna um StaticNodeList em vez de um Array real?

Isso me incomoda que eu não posso apenas document.querySelectorAll(…).map(…) mesmo no Firefox 3.6, e eu ainda não consigo encontrar uma resposta, então eu pensei em cross-post em Então a pergunta deste blog: Yay for querySelectorAll. Boo for StaticNodeList. Alguém sabe de uma razão técnica pela qual você não consegue um Array? Ou por que um […]

Elemento filho de estilo ao passar o mouse sobre o pai

Como alterar o estilo do elemento filho quando há foco no elemento pai. Eu preferiria uma solução CSS para isso, se possível. Existe alguma solução possível através de: hover seletores CSS. Na verdade, eu preciso mudar a cor da barra de opções dentro de um painel quando há um foco no painel. Procurando para suportar […]