(selettore CSS e jQuery) seleziona, con la specificazione del suo contenuto, gli Elementi HTML in base ai relativi attributi.
Sintassi
<style>
[nome_attributo]
[nome_attributo = "valore_attributo"]
[nome_attributo ~= "valore_attributo"]
[nome_attributo |= "valore_attributo"]
[nome_attributo ^= "valore_attributo"]
[nome_attributo $= "valore_attributo"]
[nome_attributo *= "valore_attributo"]
{
<!-- codice css -->
}
</style>
<script>
<!-- solo jQuery -->
§("[nome_attributo != 'valore_attributo']") {
<!-- codice JavaScript/jQuery -->
}
</script>
[nome_attributo]
Seleziona gli Elementi HTML che possiedono l’attributo nome_attributo, indipendentemente dal suo valore.
Esempi
<a title="descrizione link">link</a>
<input title="descrizione input" value="testo">
<style>
[title] {
color: red;
}
</style>
[nome_attributo = "valore_attributo"]
Seleziona gli Elementi HTML che possiedono l’attributo nome_attributo con un determinato valore valore_attributo (case sensitive).
Esempi
<a title="descrizione link2">link</a>
<style>
[title="descrizione link2"] {
color: red;
}
</style>
[nome_attributo ~= "valore_attributo"]
Seleziona gli Elementi HTML il cui attributo nome_attributo contiene una lista di parole separate da spazi, una delle quali è uguale al valore valore_attributo (case sensitive).
Esempi
<a title="descrizione link3">link</a>
<style>
[title~="link3"] {
color: red;
}
</style>
[nome_attributo |= "valore_attributo"]
Seleziona gli Elementi HTML il cui attributo nome_attributo contiene una lista di parole separate da trattini, una delle quali è uguale al valore valore_attributo (case sensitive).
Esempi
<a title="link4-descrizione">link</a>
<style>
[title|="link4"] {
color: red;
}
</style>
[nome_attributo ^= "valore_attributo"]
Seleziona gli Elementi HTML che possiedono l’attributo nome_attributo che inizia con un determinato valore valore_attributo (case sensitive), a prescindere dal fatto che sia una parola intera o unica.
Esempi
<a title="descrizione5">link</a>
<a title="descrizione5bis">link</a>
<a title="descrizione5 link">link</a>
<a title="descrizione5-link">link</a>
<style>
[title^="descrizione5"] {
color: red;
}
</style>
[nome_attributo $= "valore_attributo"]
Seleziona gli Elementi HTML che possiedono l’attributo nome_attributo che finisce con un determinato valore valore_attributo (case sensitive), a prescindere dal fatto che sia una parola intera o unica.
Esempi
<a title="link6">link</a>
<a title="666link6">link</a>
<a title="descrizione link6">link</a>
<a title="descrizione-link6">link</a>
<style>
[title$="link6"] {
color: red;
}
</style>
[nome_attributo *= "valore_attributo"]
Seleziona gli Elementi HTML che possiedono l’attributo nome_attributo che contiene un determinato valore valore_attributo (case sensitive), a prescindere dal fatto che sia una parola intera o dove si trovi.
Esempi
<a title="descrizione link7">link</a>
<a title="descrizione-link777">link</a>
<style>
[title*="nk7"] {
color: red;
}
</style>
"[nome_attributo != 'valore_attributo']" (jQuery)
Seleziona gli Elementi HTML che non possiedono l’attributo nome_attributo con un determinato valore valore_attributo (case sensitive). E’ l’equivalente del selettore :not([nome_attributo = 'valore_attributo'].
Esempi
<a title="descrizione8">link</a>
<a title="descrizione8bis">link</a>
<script>
jQuery("[title != 'descrizione8bis']").css("color", "red");
</script>
Contenuti correlati
- CSS
- HTML
- JavaScript
- jQuery
- PHP
- SQL
- WORDPRESS
0 Comment