Ostatnio edytowany:

:read-write

Autor: Virtual Patriot

Przeznaczenie selektora :read-write

      :read-write { ... }
    

Selektor :read-write odwołuje się do każdego elementu HTML, którego cechy w danym momencie spełniają zasadę pseudoklasy :read-write.

Cechy elementu HTML spełniają zasadę pseudoklasy :read-write, gdy w danym momencie do danego elementu HTML możemy wprowadzić własny tekst.

Dodatkowe techniczne informacje o selektorze :read-write

ograniczenie - elementy HTML

brak

Dzięki globalnemu atrybutowi contenteditable do większości elementów HTML możemy wprowadzić własny tekst.

ograniczenie - właściwości CSS

brak

Przykładowa reguła CSS, selektor :read-write

p:read-write {
  color:red;
}

Wyjaśnienie przykładowej reguły CSS

      p:read-write { color:red; }
    
p:read-write

Do każdego elementu p, do którego możemy wprowadzić własny tekst

color

dodaj właściwość CSS, która zmieni kolor tekstu elementu HTML

red

na barwę czerwoną

Kod źródłowy przykładowego dokumentu HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      p:read-write {
        color:red;
      }

      /* Dla przeglądarki internetowej Firefox */
      p:-moz-read-write {
        color:red;
      }
    </style>
  </head>

  <body>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu
    </p>

    <p contenteditable>
      tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" możemy wprowadzić własny tekst
    </p>

    <p>
      tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu
    </p>

  </body>
</html>

Rezultat

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu

tekst znajdujący się w zawartości tego elementu "p" jest koloru czerwonego, ponieważ do tego elementu "p" możemy wprowadzić własny tekst

tekst znajdujący się w zawartości tego elementu "p" nie jest koloru czerwonego, ponieważ do tego elementu "p" nie możemy wprowadzić własnego tekstu

Interpretacja selektora :read-write

Firefox

tak, lecz z przedrostkiem -moz-

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

nie

Edge

tak