Introducere în Web Development

Selectorii sunt folosiți în elementul <style> sau în fișier CSS extern pentru a spune căror elemente se vor aplica proprietățile. După selector se vor pune proprietățile între {acolade}.

Selectorii pot deveni foarte complecși, dar la bază sunt câteva categorii, prezentate în această lecție.

Selectorul de element

Atunci când folosim numele unui element HTML, stilurile vor fi aplicate pe toate elementele de acel tip de pe pagină.

                    h1 {
  background: red;
  color: white;
}
                

Aici am selectat toate elementele <h1>, și i-am setat fundalul roșu și culoarea textului albă.

Pseudo-Elemente ::

Pe lângă elementele pe care le scriem noi în cod, mai putem stiliza din CSS și elemente ascunse. Numele acestor psudo-elemente este fix și vom învăța câteva într-o lecție viitoare.

Selectorul de .clasă

Toate elementele HTML pot avea un atribut class, în care definim una sau mai multe clase, separate prin spațiu.

                    <span class="bold altceva"></span>


                

                    .bold {
  font-weight: bold;
}
                

O clasă poate apărea de mai multe ori pe pagină, pe orice fel de elemente.

Pseudo-clase :

Vom intra în mai multe detalii legate de pseudo-clase într-o lecție viitoare. Pseudo-clasele funcționează asemănător claselor normale, doar că sunt aplicate automat și ne legăm de ele în CSS folosind două-puncte : urmat de un nume fix.

Deocamdată, poate vrei să știi despre pseudo-clasa :hover. Aceasta se aplică pe element atunci când cursorul de mouse este deasupra sa. Astfel, putem să facem butoane care își schimbă culoarea, sau să deschidem un sub-meniu fără să fie nevoie de click.

                    a:hover {
  /* 
  Se va aplica ancorelor 
  doar când cursorul este deasupra 
  */

  text-decoration: underline;
}
                

Selectorul de #ID

Toate elementele HTML pot avea un atribut id, în care definim un identificator unic pe pagină. Un singur element poate avea acel identificator. Numele identificatorului poate conține doar litere, cifre, minus -, sau underscore _.

                    <nav id="main-menu">


                

                    #main-menu {
  position: fixed;
}
                

Selectorul global *

Putem să selectăm absolut toate elementele folosind caracterul steluță (*).

                    * {
 box-sizing: border-box;
}
                

Trebuie să avem grijă cu acest selector. Se aplică la toate elementele și asta s-ar putea să ne încurce în unele situații. De exemplu, când folosim proprietăți care se aplică la descendenți, se va suprascrie valoarea mereu din cauza selectorului *.

Selectori de atribut [atribut=valoare]

Mai rari întâlniți, dar uneori utili sunt și selectorii de atribut. Sunt mai multe variații, dar cele mai întâlnite și folosite de mine sunt cel pentru prezența atributului ([atribut]) și cel care testează valoarea atributului [atribut="valoare"].

Aș recomanda să eviți pe cât posibil acești selectori, pentru că vor consuma relativ multe resurse pentru a fi asociați unui element.

                    [href="http://www.scoalaweb.ro/"] {
  background: yellow;
}