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

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>

E selecionamos eles assim

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

Excelente adição a nossos tutoriais amigo, obrigado por compartilhar conosco!

JS

Esse seletor vai selecionar apenas os atributos que comecem com "pt"

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.

É simples, por exemplo quando vamos escrever textos em outros idiomas o correto é definir uma linguagem para eles não? Por exemplo

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...

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.