Scribd Logo
Carica

Benvenuto in Scribd!

  • Selettori PDF

    Caricato da

    Jeanin Sorescu
    29 visualizzazioni3 pagine

    Titolo originale

    Selettori pdf

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    29 visualizzazioni3 pagine

    Selettori PDF

    Caricato da

    Jeanin Sorescu

    Copyright:

    © All Rights Reserved
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    I SELETTORI: RIEPILOGO

    * selettore universale (seleziona tutti gli elementi)

    h1 selettore di elemento h1
    p selettore di elemento p
    div selettore di elemento div

    .grande selettore di classe (seleziona tutti gli elementi con attributo


    class="grande")

    p.grande selettore specifico di classe (seleziona solo i p con attributo


    class="grande")

    #piccolo selettore di id (seleziona gli elementi con attributo


    id="piccolo")
    nb: l'elemento in questione dovrebbe essere unico nel documento html

    p#piccolo selettore specifico di id (seleziona solo l'elemento p con


    attributo id="piccolo")
    nb: l'elemento in questione dovrebbe essere unico nel documento html

    h1,p,.grande selettore di raggruppamento


    (i membri del gruppo sono: 2 selettori di elemento e un selettore di
    classe)

    selectorA selectorB selettore di discendente (selectorB è incapsulato sul


    selectorA)
    ESEMPIO 1:
    div p Seleziona tutti i p che sono discendenti (figli, nipoti, ecc.) di
    un div
    ESEMPIO 2:

    p.grande div Seleziona tutti i div che sono discendenti


    (figli,nipoti,ecc.) di un p class=“grande”

    selectorA>selectorB selettore di figlio (selectorB è figlio di selectorA)


    ESEMPIO 1:
    p.grande>div Seleziona tutti i div che sono figli di un p class=“grande”
    ESEMPIO 2:
    #container>* Seleziona tutti gli elementi che sono figli di un elemento
    id=”container”

    selectorA+selectorB selettore di fratello adiacente (selectorB deve


    essere un fratello (minore) adiacente
    di selectorA)
    ESEMPIO:
    div+p Seleziona solo i p che sono fratelli minori adiacenti di un div

    selectorA~selectorB selettore generale di pari livello (selectorB deve


    essere un qualsiasi fratello
    (minore) di selectorA). Il simbolo tilde (~) si ottiene con la
    combinazione Alt+126
    ESEMPIO:
    div~p Seleziona tutti i p che sono fratelli minori (di pari livello) di
    un div
    selectorA:status selettore di pseudoclasse (Selezione l’elemento quando
    si trova in un determinato
    stato)
    ESEMPIO 1:
    a:hover Seleziona tutte le a quando si trovano nello stato di hover (il
    mouse ci passa sopra).
    ESEMPIO 2:
    header~section:hover Seleziona tutte le section (fratelli minori di pari
    livello di una header)
    quando si trovano nello stato di hover

    selectorA::parte selettore di pseudoelemento (Seleziona la parte


    specifica dell’elemento)
    ESEMPIO 1:
    div::after{
    content:”Ciao”
    display:block;
    }
    Inserisce il contenuto “Ciao” subito dopo una div
    ESEMPIO 2:
    p::first-letter{
    color:red;
    }
    Colora di rosso la prima lettera di un elemento p
    ESEMPIO 3:
    div>p::first-letter{
    text-decoration:underline;
    }
    Sottolinea la prima lettera di un elemento p figlio di una div

    ELEMENTI IN LINEA (display: inline):


    <a>, <b>, <br>, <i>, <img>, <label>, <map>, <u>

    ELEMENTI IN LINEA-BLOCCO (display: inline-block):


    <button>, <select>, <textarea>

    ELEMENTI BLOCCO (display: block):


    <article>, <aside>, <body>, <div>, <footer>, <form>, <hn>, <header>,
    <hr>, <li>, <nav>, <ol>, <p>, <section>, <ul>,

    SELETTORI DI PSEUDOCLASSE:
    unvisited link  a:link
    visited link a:visited
    mouse over link  a:hover
    selected link a:active

    SELETTORI DI PSEUDOELEMENTO:
    ::first-letter
    ::first-line
    ::before
    ::after
    ::marker
    ::selection
    COMANDI (parametri):
    border:
    padding:
    margin:
    color:
    font-size:
    font-family:
    background-color:
    width:
    border-radius:
    text-align:
    display:
    vertical-align:
    text-decoration:

    Potrebbero piacerti anche