3. előadás

div, p, h2{
    /*Html tag-ek kiválasztása*/
}

.my_button, .side_drawer{
    /*Css osztályok kiválasztása*/
}

div[data-stg]{
    /*minden data-stg attribútummal rendelkező elemek*/
}

div[data-stg="some-value"]{
    /*minden data-stg attribútummal rendelkező elemek, amelyek értéke "some-value"*/
}

#navigation{
    /*Az egyedi(és egyedüli) "navigation" azonosítójú elem*/
}

div.my_class{
    /*az osztály, és attribútum selectorok összetehetőek*/
}

:root{
    /*Gyökérelem kiválasztása*/
}

::selection{
    /*Felhasználó által kijelölt terület*/
}

h1, h2{
    /*egyszerűen több elemre értelmezett, nincsen köze a h1-nek itt a h2-höz*/
}

div + h2{
    /*A div első h2 eleme*/
}

div > p{
    /*Csak azon p-k-re értelmezett, amik közvetlen! leszármazottja egy div-nek*/
}

div button{
    /*Azon p elemekre értelmezett, amiknek valahol van legalább egy div szülője*/
}

p ~ iframe{
    /*Azon iframe-ekre értelmezett, amiknek van legalább egy p testvére*/
}

/*Új feature, csak Kotlin nem bír magával

Kotlin moment
:nod:
*/

nav:has(button.active){
    /*Csak arra a nav elemre értelmezett, aminek van ".active" osztályú button-je*/
}

input:focus, input:focus-within{
    /*
    azon input elem, amibe a felhasználó fókuszál
    Fontos, hogy a :focused pszeudo osztály a hierarchiát követi, tehát az input összes szülője is fókuszáltnak számít
    */
}

input[type="checkbox"]:checked{
    /*Aktivált állapot*/
}

p:first-child, p:last-child{
    /*A p testvérek első, utolsó eleme*/
}

p:nth-child(2n-1){
    /*
    minden páratlanadik p testvér a DOM szerint
    */
}

q {
  quotes: "“" "”" "‘" "’";
}
q.quoted::before {
    content: open-quote;
}
q.quoted::after {
    content: close-quote;
}
/*Automatikus idézőjelek beállítása, és alkalmazása*/

@media only screen and (max-width: 33rem) {

}

@media (prefers-color-scheme: dark) {

}

p:first-child{
    color: salmon;
}

div:focus{
    color: #906090;
}

.designer[data-is-woman="true"]::before{
    content: "Elő";
    color: rgb(90,60,90);
}

#gucci.on{
    color: rgba(30,50,80,0.9);
    /*I can have my gucci on*/
}

#louis > vutton{
    color: hsl(100,10%,50%)
    /*I can have my luis vutton*/
}

.even ~ .with{
    color: rgba(0,0,0,0);
    /*but even with nothin' on*/
    /*I made you look*/
    /*I made you look*/
}