Selecionando atributos com CSS (Avançado)
3 participantes
Página 1 de 1
Selecionando atributos com CSS (Avançado)
Olá amigos, hoje trago um tutorial de várias maneiras de selecionar elementos por diversos atributos.. Vamos la..
Seletor por tipo
Este tipo de seletor, encontra os elementos pelo seu tipo, veja os exemplos
Seletor por atributo
Este seletor encontra os elementos através do seu atributo, veja os exemplos:
Se criarmos um HTML assim
Podemos seleciona-lo assim
Seletor por atributo com valor
Este seletor encontra os elementos através de seu atributo e valor, por exemplo:
Selecionamos ele da seguinte maneira
Seletor por atributo com valor e elemento iniciado com determinado valor, veja:
Esse seletor vai selecionar apenas os atributos que comecem com "pt"
Seletor por atributo com valor e que contenha determinado elemento, veja:
Seletor por atributo com valor e obrigatoriamente inicie com determinado elemento, veja:
Vamos usar o mesmo HTML do exemplo acima
E o exemplo
Seletor por atributo com valor e obrigatoriamente termine com determinado elemento, veja:
Denovo o mesmo HTML
E agora alteramos o CSS
Seletor por atributo com valor e obrigatoriamente contenha determinado elemento, veja:
The same, again
And the CSS
Espero que esse guia seja útil para o pessoal, agradeço a atenção e até breve
Seletor por tipo
Este tipo de seletor, encontra os elementos pelo seu tipo, veja os exemplos
- Código:
body{
propriedade: valor;
}
h1{
propriedade: valor;
}
img{
propriedade: valor;
}
p{
propriedade: valor;
}
Seletor por atributo
Este seletor encontra os elementos através do seu atributo, veja os exemplos:
Se criarmos um HTML assim
- Código:
<p class></p>
<p title></p>
Podemos seleciona-lo assim
- Código:
p[title]{
propriedade: valor;
}
p[class]{
propriedade: valor;
}
Seletor por atributo com valor
Este seletor encontra os elementos através de seu atributo e valor, por exemplo:
- Código:
<p class="classe"></p>
<p title="titulo"></p>
Selecionamos ele da seguinte maneira
- Código:
p[title="titulo"]{
propriedade: valor;
}
p[class="classe"]{
propriedade: valor;
}
Seletor por atributo com valor e elemento iniciado com determinado valor, veja:
- Código:
<p lang="pt">Português<p>
<p lang="pt-br">Português do Brasil<p>
<p lang="en">English<p>
Esse seletor vai selecionar apenas os atributos que comecem com "pt"
- Código:
p[lang|="pt"]{
propriedade: valor;
}
Seletor por atributo com valor e que contenha determinado elemento, veja:
- Código:
<p title="paragrafo um">Parágrafo 1</p>
<p title="segundo paragrafo">Parágrafo 2</p>
<p title="paragrafo tres">Parágrafo 3</p>
- Código:
p[title~="paragrafo"]{
color: red;
}
Seletor por atributo com valor e obrigatoriamente inicie com determinado elemento, veja:
Vamos usar o mesmo HTML do exemplo acima
- Código:
<p title="paragrafo um">Parágrafo 1</p>
<p title="segundo paragrafo">Parágrafo 2</p>
<p title="paragrafo tres">Parágrafo 3</p>
E o exemplo
- Código:
p[title^="paragrafo"]{
color: red;
}
Seletor por atributo com valor e obrigatoriamente termine com determinado elemento, veja:
Denovo o mesmo HTML
- Código:
<p title="paragrafo um">Parágrafo 1</p>
<p title="segundo paragrafo">Parágrafo 2</p>
<p title="paragrafo tres">Parágrafo 3</p>
E agora alteramos o CSS
- Código:
p[title$="paragrafo"]{
color: red;
}
Seletor por atributo com valor e obrigatoriamente contenha determinado elemento, veja:
The same, again
- Código:
<p title="paragrafo um">Parágrafo 1</p>
<p title="segundo paragrafo">Parágrafo 2</p>
<p title="paragrafo tres">Parágrafo 3</p>
And the CSS
- Código:
p[title*="paragrafo"]{
color: red;
}
Espero que esse guia seja útil para o pessoal, agradeço a atenção e até breve
Re: Selecionando atributos com CSS (Avançado)
Excelente adição a nossos tutoriais amigo, obrigado por compartilhar conosco!
JS
JS
Re: Selecionando atributos com CSS (Avançado)
Esse seletor vai selecionar apenas os atributos que comecem com "pt"
Este eu não entendi muito bem, se poder citar mais exemplos referentes a ele
ótimo tutorial, obrigado por compartilhar.
- Código:
p[lang|="pt"]{
propriedade: valor;
}
Este eu não entendi muito bem, se poder citar mais exemplos referentes a ele
ótimo tutorial, obrigado por compartilhar.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: Selecionando atributos com CSS (Avançado)
É simples, por exemplo quando vamos escrever textos em outros idiomas o correto é definir uma linguagem para eles não? Por exemplo
Nesse caso o seletor iria estilizar todos os elementos que estejam em português, independente de ser Português do Brasil, de Portugal, etc...
Veja o exemplo:
http://jsbin.com/oPoNASit/1
Note que este seletor
É diferente deste
Este seletor seleciona apenas os elementos que estejam em Português do Brasil.
Outro exemplo que podemos dar é
http://jsbin.com/oPoNASit/1
@Edit: O JsBin bugou ali, o primeiro exemplo era outro, mas acho que da para entender...
- Código:
<p lang="en">My text</p>
Nesse caso o seletor iria estilizar todos os elementos que estejam em português, independente de ser Português do Brasil, de Portugal, etc...
Veja o exemplo:
http://jsbin.com/oPoNASit/1
Note que este seletor
- Código:
p[lang|="pt"]{
propriedade: valor;
}
É diferente deste
- Código:
p[lang="pt-br"]{
propriedade: valor;
}
Este seletor seleciona apenas os elementos que estejam em Português do Brasil.
Outro exemplo que podemos dar é
http://jsbin.com/oPoNASit/1
@Edit: O JsBin bugou ali, o primeiro exemplo era outro, mas acho que da para entender...
Re: Selecionando atributos com CSS (Avançado)
Obrigado, de pra entender agora com seu exemplo.
Obrigado pela explicação.
obs: eu só não curti por que deu um erro aqui, vou mostrar o log para o jscript para ele ver o que é.
até mais.
Obrigado pela explicação.
obs: eu só não curti por que deu um erro aqui, vou mostrar o log para o jscript para ele ver o que é.
até mais.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|