Ultimele tutoriale de dezvoltare web
 

CSS combinatoare


CSS combinatoare

Un combinator este ceva care explică relația dintre selectorii.

Un selector CSS poate conține mai mult de un selector simplu. Între selectorii simplu, putem include un combinator.

Există patru combinatoare diferite în CSS3:

  • selector descendent (space)
  • Selector copil (>)
  • Selectorul frate adiacent (+)
  • Selector generală frate (~)

Selector de descendentul

Selectorul descendent se potrivește cu toate elementele care sunt descendenți ai unui element specificat.

Exemplul următor selectează toate <p> elemente din interiorul <div> elemente:

Exemplu

div p {
    background-color: yellow;
}
Încearcă - l singur »

Selector pentru copii

Selectorul copil selectează toate elementele care sunt copiii imediate ale unui element specificat.

Exemplul următor selectează toate <p> elemente care sunt copii directe cu un <div> Element:

Exemplu

div > p {
    background-color: yellow;
}
Încearcă - l singur »

Selector de Sibling Adiacent

Selectorul frate adiacent selectează toate elementele care sunt frații adiacente ale unui element specificat.

Elementele sibling trebuie să aibă același element părinte, și "adjacent" înseamnă "immediately following" .

Exemplul următor selectează toate <p> Elementele care sunt plasate imediat după <div> elemente:

Exemplu

div + p {
    background-color: yellow;
}
Încearcă - l singur »

General Sibling Selector

Selectorul generală frate selectează toate elementele care sunt frați și surori ale unui element specificat.

Exemplul următor selectează toate <p> elemente care sunt frații <div> elemente:

Exemplu

div ~ p {
    background-color: yellow;
}
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»