CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

Pseudotřídy CSS


Co jsou Pseudotřídy?

Pseudotřída se používá k definování speciálního stavu prvku.

Lze jej například použít k:

  • Upravte styl prvku, když na něj uživatel přejede myší
  • Styl navštívených a nenavštívených odkazů se liší
  • Upravte styl prvku, když se zaostří

Myš nade mnou


Syntax

Syntaxe pseudotříd:

selector:pseudo-class {
  property: value;
}

Ukotvení Pseudotřídy

Odkazy lze zobrazit různými způsoby:

Příklad

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
}

Poznámka: a:hover Aby byla účinná, MUSÍ následovat za a:linka a:visitedv definici CSS! a:activeMUSÍ následovat a:hoverv definici CSS, aby byla účinná! Názvy pseudotříd nerozlišují velká a malá písmena.



Pseudotřídy a HTML třídy

Pseudotřídy lze kombinovat s HTML třídami:

Když umístíte kurzor na odkaz v příkladu, změní se barva:

Příklad

a.highlight:hover {
  color: #ff0000;
}

Umístěte ukazatel myši na <div>

Příklad použití :hoverpseudotřídy na prvku <div>:

Příklad

div:hover {
  background-color: blue;
}


Jednoduchá nápověda po přejetí myší

Umístěním ukazatele myši na prvek <div> zobrazíte prvek <p> (jako popisek):

Umístěním ukazatele myši na mě zobrazíte prvek <p>.

Tada! Here I am!

Příklad

p {
  display: none;
  background-color: yellow;
  padding: 20px;
}

div:hover p {
  display: block;
}


CSS – Pseudotřída :first-child

Pseudotřída :first-childodpovídá zadanému prvku, který je prvním potomkem jiného prvku.

Shodujte se s prvním prvkem <p>

V následujícím příkladu selektor odpovídá libovolnému prvku <p>, který je prvním potomkem libovolného prvku:

Příklad

p:first-child {
  color: blue;
}

Porovnejte první prvek <i> ve všech prvcích <p>

V následujícím příkladu se selektor shoduje s prvním prvkem <i> ve všech prvcích <p>:

Příklad

p i:first-child {
  color: blue;
}

Porovnejte všechny prvky <i> ve všech prvních podřízených prvcích <p>

V následujícím příkladu selektor odpovídá všem prvkům <i> v prvcích <p>, které jsou prvním potomkem jiného prvku:

Příklad

p:first-child i {
  color: blue;
}

CSS – Pseudotřída :lang

Pseudotřída :langumožňuje definovat speciální pravidla pro různé jazyky.

V níže uvedeném příkladu :langdefinuje uvozovky pro prvky <q> s lang="no":

Příklad

<html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

Další příklady


Tento příklad ukazuje, jak přidat další styly k hypertextovým odkazům.


Tento příklad ukazuje, jak používat pseudotřídu :focus.


Otestujte se pomocí cvičení

Cvičení:

Když najedete myší na odkaz, nastavte barvu pozadí na červenou.

<style>
 {
  background-color: red;
}
</style>

<body>

<h1>This is a header.</h1>
<p>This is a paragraph.</p>
<a href="https://w3schools.com">This is a link.</a>

</body>


Všechny Pseudo třídy CSS

Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

Všechny Pseudo prvky CSS

Selector Example Example description
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user