Na actualidade, a quantidade de páginas web que utilizam CSS é massiva, sendo que atualmente milhares e milhares de pessoas utilizam o CSS para estilizar suas páginas e blogs. Desde desenvolvedores a blogueiros, passando por meros curiosos, o CSS é hoje uma linguagem de programação amplamente conhecida e utilizada na internet. Nos dias de hoje já não há desculpa para não utilizar CSS nas suas produções básicas! No artigo O que são selectores CSS? (Parte I) falámos sobre os Type Selectors, Class Selectors e ID Selectors. Nesta Parte II vamos abordar mais 3 tipos de selectores em CSS – Os Descendant Selectors, Child Selectors e Adjacent Selectors – e você vai ficar a saber direitinho como os usar e como tirar o maior proveito da utilização dos mesmos em O que são selectores CSS? Parte II

Se desejar, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

Endereço de Email: 

CSS

1. DESCENDANT SELECTORS

Um Descendant Selector é particularmente útil em casos onde você necessite de ter estilos separados no mesmo elemento. Quer isto dizer que se tiver necessidade de diferenciar texto na sua sidebar, poderá aplicar uma classe à tag <p> em todos os parágrafos. Mas, para facilitar essa tarefa surgiu um novo método, que consiste em aplicar uma classe da sidebar a um elemento e definir a cor para todos os elementos p dentro desse elemento para uma cor à sua escolha, utilizando um trecho de código CSS bastante simples:

p {
    color: #006654;
}
.sidebar p {
    color: #FFFFFF;
}

Então, para aplicarmos este estilo:

<div class="sidebar">
    <p>Este parágrafo irá ter a cor branca.<p>
</div>

2. CHILD SELECTORS

Os Descendant Selectors abrangem todos os elementos que sejam descendentes directos do elemento principal, e isto inclui todos os elementos que não estão directamente ligados. Passamos a explicar:

<div class="sidebar">
    <p>Este parágrafo irá ter a cor branca.<p>
    <div class="alternativo">
        <p>Ao utilizarmos um Descendant Selector, este parágrafo irá ficar branco também. No entanto, se utilizarmos um Child Selector, irá ficar de outra cor.</p>
    </div>
</div>

No caso acima, e utilizando o código que apresentámos nos Descendant Selector, o parágrafo dentro da classe “alternativo” iria ser branco também, pois mesmo não estando directamente ligado à classe “sidebar”, está dentro da sua div. Para evitar isto, temos de fazer uma pequena alteração ao código:

p {
    color: #006654;
}
.sidebar>p {
    color: #FFFFFF;
}

Ao introduzirmos “>” estamos a indicar que aquela cor só irá ser aplicada aos parágrafos que estejam directamente ligados à classe “sidebar”. Desta forma podemos assegurar que apenas esses irão ser estilizados, e que será possível dentro do mesmo div, ter estilos diferentes.

Nota: Para os leitores que persistem em manter a compatibilidade com os navegadores mais antigos, o Internet Explorer 6 não suporta os Child Selectors.

3. ADJACENT SELECTORS

Um Adjacent Selector só irá afectar os elementos que sejam adjacentes a um elemento especificado. Passamos a explicar:

<h2>Título em cor branca</h2>
<p>Subtítulo em cor branca</p>
<p>Texto em cor preta</p>

O elemento adjacente ao elemento <h2> é o que vem imediatamente a seguir, <p>. Então esses dois elementos irão ser estilizados de igual forma, com a mesma cor. Os próximos irão retomar a sua cor normal. Para o fazer, basta utilizar o seguinte código:

p {
    color: #000000;
]
h2+p {
    color: #FFFFFF;
}

Aqui definimos que os parágrafos têm a cor preta, e definimos também que o heading H2 irá ter a cor branca, bem como o elemento <p> adjacente a ele. Apenas o primeiro parágrafo irá ser mostrado com a cor branca, enquanto que o segundo parágrafo irá ter a cor preta, pois não é adjacente a um elemento H2.

Nota: Para os leitores que persistem em manter a compatibilidade com os navegadores mais antigos, o Internet Explorer 6 não suporta os Adjacent Selectors.

Esta foi a última parte dos artigos sobre os Selectores CSS. Se desejar continuar a seguir as nossas publicações, poderá subscrever a nossa newsletter gratuita e receber os próximos conteúdos diretamente na sua caixa de email:

Endereço de Email: 

E VOCÊ, UTILIZA OS SELECTORES CSS?

Você utiliza os selectores CSS? Partilhe com a comunidade criativa a sua experiência e fique a conhecer as opiniões de outros leitores!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos

RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz