CSS Înțelegere Selecții simple vs Selecții complexe - Tutorial CSS Gratuit Online

În CSS, selecțiile pot fi simple sau complexe, în funcție de cum sunt construite.

Aceste selecții sunt folosite pentru a identifica și aplica stiluri asupra elementelor HTML în pagină. Să explorăm mai detaliat diferențele dintre selecțiile simple și complexe:

Selecții Simple:

Selectarea pe bază de nume de element: Selectați toate instanțele unui anumit element HTML. Exemplu: p selectează toate elementele <p> (paragrafele).
Selectarea pe bază de clasă: Selectați elementele care au o anumită clasă atribuită. Exemplu: .highlight selectează toate elementele cu clasa highlight.
Selectarea pe bază de ID: Selectați un element specific folosind ID-ul său unic. Exemplu: #main-title selectează elementul cu ID-ul main-title.

Selecții Complexe:

Selectarea prin înlănțuire: Combinarea a două sau mai multe selecții simple într-o singură selecție. Exemplu: header nav selectează toate elementele <nav> din cadrul unui element <header>.
Selectarea copilului direct: Selectați un element care este copil direct al altui element. Exemplu: ul > li selectează toate elementele <li> care sunt copii direcți ai unui element <ul>.
Selectarea după clasă în interiorul unui element: Selectați elementele cu o anumită clasă în cadrul unui alt element. Exemplu: article .info selectează elementele cu clasa .info în interiorul elementelor <article>.
Selectarea prin combinarea clasei și a numelui de element: Combinați numele elementului și clasa pentru a selecta elementele cu o anumită clasă în cadrul unui tip specific de element. Exemplu: h2.title selectează toate elementele <h2> cu clasa .title.
Selectarea prin atribut: Selectați elementele în funcție de anumite atribute. Exemplu: input[type="text"] selectează toate elementele <input> de tip text.

Exemple Practice CSS si HTML:

Foloseste butonul Testare sau Salveaza ca HTMl si deschide pagina in browser.

 <!DOCTYPE html>
<html>
<head>
  <style>
/* Stilizare pentru toate elementele <h1> */
h1 {
  color: blue;
}

/* Stilizare pentru toate elementele <a> din interiorul unui <nav> */
nav a {
  text-decoration: none;
  color: green;
}

/* Stilizare pentru toate elementele cu clasa "title" în interiorul elementelor <article> */
article .title {
  font-size: 20px;
  font-weight: bold;
}

/* Stilizare pentru toate elementele <article> cu clasa "info" */
article.info {
  background-color: #f5f5f5;
  padding: 10px;
}

/* Stilizare pentru toate elementele <ul> care sunt copii direcți ai unui <nav> */
nav > ul {
  list-style-type: none;
}

/* Stilizare pentru toate elementele <li> din interiorul unui <ul> din interiorul unui <nav> */
nav ul li {
  margin: 5px 0;
}

/* Stilizare pentru toate elementele <p> în interiorul unui <article> care urmează un <h2> */
article h2 + p {
  font-style: italic;
}

/* Stilizare pentru toate elementele <input> de tip text */
input[type="text"] {
  border: 1px solid #ccc;
  padding: 5px;
}


</style>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="#">Acasă</a></li>
        <li><a href="#">Despre</a></li>
        <li><a href="#">Servicii</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1 id="main-title">Bine ați venit!</h1>
    <article class="info">
      <h2 class="title">Titlu Articol</h2>
      <p>Acesta este un articol informativ.</p>
    </article>
    <article>
      <h2>Alt titlu</h2>
      <p>Un alt articol obișnuit.</p>
      <input type="text" id="nume" name="nume" >
    </article>
  </main>
</body>
</html>

Studiază Tutoriale cu Exemple Practice:

Lecții Invatare HTML

Lecții CSS

În acest exemplu, fiecare tip de selecție este ilustrat astfel:

h1: Stilizează toate elementele <h1> pentru a avea culoarea albastră.
nav a: Stilizează toate elementele <a> din interiorul unui <nav> pentru a nu avea subliniere și pentru a avea culoarea verde.
article .title: Stilizează elementele cu clasa .title din interiorul elementelor <article> pentru a avea dimensiunea fontului mărită și pentru a avea bold.
article.info: Stilizează elementele <article> cu clasa .info pentru a avea un fundal de culoare deschisă și un spațiu de padding.
nav > ul: Stilizează toate elementele <ul> care sunt copii direcți ai unui <nav> pentru a nu avea stilurile implicite ale listei.
nav ul li: Stilizează toate elementele <li> din interiorul unui <ul> din interiorul unui <nav> pentru a avea margin-top și margin-bottom.
article h2 + p: Stilizează paragraful care urmează un element <h2> din interiorul unui <article> pentru a avea stil italic.
input[type="text"]: Stilizează toate elementele <input> de tip text pentru a avea un chenar subțire și un spațiu de padding.

Aceste exemple practice ilustrează modul în care puteți folosi diverse tipuri de selecții pentru a aplica stiluri specifice elementelor HTML într-o pagină web.

Asistent Blog, Site, HTML, CSS...