Pinceladas da Web

Muitas pessoas já trabalham dessa forma, mas muitas ainda não tem o costume de trabalhar assim, mas como funcionam os seletores de contexto em CSS? Basicamente funciona da seguinte forma: Você pode definir seletores que só serão aplicados se estiverem no contexto de um outro seletor, não fui bem claro? Peguemos um exemplo:

p.verde em { color: #000040; }

O que aconteceria na regra acima é que todo em, filhos de p com a classe verde terão as sua cores alteradas. A declaração também pode ser mais longa. Vejam outro exemplo:

.chefe p ul ul li a.classex:visited { font-style: italic; }

Acima podemos ver que apenas os links visitados da “classex”, que estejam dentro de listas de segundo nível, situados dentro de um parágrafo, e dentro de um bloco qualquer da classe “chefe”, serão mostrados em itálico.

Seletores de contexto seriam basicamente isso. Aproveite também e pesquise, pratique, pois só a prática leva a perfeição.

Acho que muita gente não conhece isso, mas os floats sem width dão problemas de posicionamento no Opera (versões antigas), mas o W3C diz em sua especificação, que deve ser obrigatoriamente declarado o width para os floats de todos os elementos, exceto os elementos img, input, textarea, select e object.

Se você precisa fazer uma barra de rolagem em uma div, existe uma maneira muito simples de se obter esse efeito, usaremos a propriedade overflow do CSS. Reparem no código abaixo:

#scroll {
  width:300px;
  height:170px;
  background-color:#F2F2F2;
  overflow:auto;
}

Agora no HTML criaremos uma div chamada scroll onde colocare-mos o nosso conteúdo que queremos que tenha a barra de rolagem:

<div id="scroll">
  <p>Aqui vai o conteúdo da div</p>
</div>

O que o overflow:auto faz é o seguinte, reparem que foi definido uma altura pra nossa div de 170px, quando o conteúdo ultrapassar essa altura, ele cria uma barra de rolagem automaticamente, interessante não, então veja um exemplo em funcionamento.