Articles of seletores css

Selecione todos os elementos filhos recursivamente em CSS

Como você pode selecionar todos os elementos filho recursivamente? div.dropdown, div.dropdown > * { color: red; } Esta class somente lança uma class no className e em todos os filhos imediatos definidos. Como você pode, de uma maneira simples, escolher todos os childNodes assim: div.dropdown, div.dropdown > *, div.dropdown > * > *, div.dropdown > […]

Em CSS, qual é a diferença entre “.” E “#” ao declarar um conjunto de estilos?

Qual é a diferença entre # e . quando declarar um conjunto de estilos para um elemento e quais são as semânticas que entram em jogo ao decidir qual delas usar?

Seletor CSS para selecionar o primeiro elemento de uma determinada class

Estou tentando selecionar um primeiro elemento da class ‘A’ em um elemento com id ou class ‘B’. Eu tentei uma combinação de seletores de + e primeiro filho, já que não é um primeiro elemento dentro do elemento de class ‘B’. Funcionou, mas … eu estou tentando sobrescrever alguns css padrão e não tenho controle […]

: not () selector não se comportando da mesma forma entre o Safari e o Chrome / Firefox

Estou tendo muita dificuldade em descobrir por que o código a seguir é exibido em azul no Safari, mas em vermelho no Chrome e no Firefox. em:not(div) { color: red } em:not(p div) { color: blue } FOO https://jsfiddle.net/hzcLpf9L/ Aparentemente, parece que o Chrome e o Firefox não suportam :not() seletores CSS com vários níveis […]

Por que o seletor .foo a: link, .foo a: visited {} sobrescreve um seletor: hover, a: active {} em CSS?

Exemplo de código: http://jsfiddle.net/RuQNP/ Foo a:link, a:visited { color: blue; } a:hover, a:active { color: red; } .foo a:link, .foo a:visited { color: green; } /* A possible fix */ /* .foo a:hover, .foo a:active { color: red; } */ Example O que eu estava esperando: O link apareceria vermelho ao passar o mouse. O […]

O que as vírgulas e espaços em várias classs significam em CSS?

Aqui está um exemplo que eu não entendo: .container_12 .grid_6, .container_16 .grid_8 { width: 460px; } Parece-me que width: 460px é aplicado a todas as classs acima mencionadas. Mas por que algumas classs são separadas por uma vírgula ( , ) e algumas apenas por um espaço? Eu suponho que width: 460px será aplicada apenas […]

O que significa “i” em um seletor de atributo de CSS?

Encontrei o seguinte seletor de CSS na folha de estilo do agente do usuário do Google Chrome: [type=”checkbox” i] O que i quero dizer?

Usando o seletor de último filho

Meu objective é aplicar o CSS no último li , mas isso não acontece. #refundReasonMenu #nav li:last-child { border-bottom: 1px solid #b5b5b5; } abcde xyz Como posso selecionar apenas o último filho?

Selecione o elemento com base em várias classs

Eu tenho uma regra de estilo que desejo aplicar a uma tag quando ela tem dois estilos. Existe alguma maneira de realizar isso sem JavaScript? Em outras palavras: Quero aplicar minha regra de estilo somente se o li tiver as classs .ui-class-selector e .ui-class-selector aplicadas.

Como combinar class e ID no seletor CSS?

Se eu tiver o seguinte div: Lorem Ipsum… Existe uma maneira de definir um estilo que expresse a ideia “Uma div com id=’content’ AND class=’myClass’ “? Ou você simplesmente segue um caminho ou outro como em Lorem Ipsum… Ou Lorem Ipsum…