Selektor CSS
CSS selektory sú chrbtovou kosťou každej štýlovej webovej stránky. Zameriavajú sa na prvky HTML na vašich stránkach, čo vám umožňuje pridávať štýly na základe ich ID, triedy, typu, atribútu a ďalších. Táto príručka sa ponorí do zložitosti selektorov CSS a ich kľúčovej úlohy pri zlepšovaní estetiky a používateľského zážitku vašich webových stránok.
Typy selektorov CSS
Selektory CSS existujú v rôznych typoch, z ktorých každý má svoj jedinečný spôsob výberu prvkov HTML. Poďme ich preskúmať:
| Selektor CSS | Popis |
|---|---|
| Jednoduché selektory | Používa sa na výber prvkov HTML na základe ich názvu prvku, ID, atribútov atď |
| Univerzálny selektor | Vyberie všetky prvky na stránke. |
| Výber atribútov | Zacieľuje prvky na základe ich hodnôt atribútov. |
| Selektor pseudotriedy | Vyberá prvky na základe ich stavu alebo polohy, ako napr :hover> pre efekty vznášania. |
| Selektory kombinátorov | Kombinujte selektory na určenie vzťahov medzi prvkami, ako sú potomkovia ( > ) alebo dieťa ( >> ). |
| Selektor pseudoprvkov | Vyberá konkrétne časti prvku, ako napr ::before> alebo ::after> . |
Obsah
- Typy selektorov CSS
- Jednoduché selektory
- Selektor prvkov
- Id Selector
- Výber triedy
- Univerzálny selektor
- Výber skupiny
- Výber atribútov
- Selektor pseudotriedy
- Selektor pseudoprvkov
Jednoduché selektory
Jednoduché selektory obsahujú nižšie uvedené triedy.
| Jednoduchý selektor | Popis |
|---|---|
| Selektor prvkov | Vyberá prvky HTML na základe ich názvov značiek. |
| Id Selector | Zacieľuje na prvok HTML so špecifickým atribútom id. |
| Výber triedy | Vyberie prvky s konkrétnym atribútom triedy. |
Príklad: V tomto príklade napíšeme kód, aby sme lepšie porozumeli selektorom a ich použitiu.
HTML Názov selektora CSS> <link rel='stylesheet' href='style.css' />hlava> <body> <h1>Vzorový nadpis1> <p>Toto je obsah v prvom odsekup> <div id='div-container'>Toto je div s id div-container div> <p>Toto je odsek s triedou paragraf-trieda p> telo> html> </pre> </code> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Na vyššie uvedený príklad použijeme pravidlá CSS. </span> </p> <h2 id='element-selector'> <b> <strong>Selektor prvkov </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>selektor prvkov </span> <span>vyberá prvky HTML na základe názvu prvku (alebo značky), napríklad p, h1, div, span atď. </span> </p> <p dir='ltr'> <b> <strong>POZNÁMKA : </strong> </b> <span>Vo vyššie uvedenom príklade je použitý nasledujúci kód. Môžete vidieť, že pravidlá CSS platia pre všetkých </span> <span> </span> </p> <p> <span>značky a </span> </p> <h1>značky. <p> </p> </h1> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>h1 { color: red; font-size: 3rem; } p { color: white; background-color: gray; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Element-Selectors-Example-output'> <p>Výstup CSS Element Selector </p> <h2 id='id-selector'> <b> <strong>Id Selector </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor ID </strong> </b> <span>používa </span> <i> <em>atribút id </em> </i> <span>prvku HTML na výber konkrétneho prvku. </span> <b> <strong> </strong> </b> <span>An </span> <b> <strong>id </strong> </b> <span>prvku je jedinečný na stránke na použitie </span> <b> <strong>id </strong> </b> <span>selektor. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora id. </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>#div-container{ color: blue; background-color: gray; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-2.webp' alt='CSS-Id-selectors-example-output'> <p>Príklad výstupu selektorov CSS ID </p> <h2 id='class-selector'> <b> <strong>Výber triedy </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor triedy </strong> </b> <span>vyberie prvky HTML so špecifickým atribútom triedy. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora triedy. Ak chcete použiť selektor triedy, musíte použiť ( . ), za ktorým nasleduje názov triedy v CSS. Toto pravidlo sa použije na prvok HTML s atribútom class </span> <i> <em>odsek-trieda </em> </i> <span> </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>.paragraph-class { color:white; font-family: monospace; background-color: purple; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-3.webp' alt='CSS-Class-Selectors-Example-Output'> <p>Príklad výstupu selektora triedy CSS </p> <h2 id='universal-selector'> <b> <strong>Univerzálny selektor </strong> </b> </h2> <p dir='ltr'> <span>The </span> <span>Univerzálny volič </span> <span>(*) v CSS sa používa na výber všetkých prvkov v dokumente HTML. Zahŕňa aj ďalšie prvky, ktoré sú vo vnútri pod iným prvkom. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou univerzálneho voliča. Toto pravidlo CSS sa použije na každý prvok HTML na stránke: </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>* { color: white; background-color: black; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-4.webp' alt='CSS-Universal-Selector-Example-Output'> <p>Príklad výstupu CSS univerzálneho selektora </p> <h2 id='group-selector'> <b> <strong>Výber skupiny </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>Selektor skupiny </strong> </b> <span>sa používa na úpravu štýlu všetkých prvkov oddelených čiarkami rovnakým štýlom. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Predpokladajme, že chcete použiť spoločné štýly na rôzne selektory, namiesto samostatného písania pravidiel ich môžete napísať do skupín, ako je uvedené nižšie. </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>#div-container, .paragraph-class, h1{ color: white; background-color: purple; font-family: monospace; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-5.webp' alt='CSS-Group-Selector-Example-Output'> <p>Príklad výstupu selektora skupiny CSS </p> <h2 id='attribute-selector'> <b> <strong>Výber atribútov </strong> </b> </h2> <p dir='ltr'> <span>The </span> <b> <strong>selektor atribútov </strong> </b> <span>[atribút] sa používa na výber prvkov so špecifikovaným atribútom alebo hodnotou atribútu. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Nasledujúci kód je použitý vo vyššie uvedenom príklade pomocou selektora atribútov. Toto pravidlo CSS sa použije na každý prvok HTML na stránke: </span> </p> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>[href] { background-color: lightgreen; color: black; font-family: monospace; font-size: 1rem; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-6.webp' alt='CSS-Atribút-Selekcie-Príklad-Výstup'> <p>Príklad výstupu výberu atribútov CSS </p> <h2 id='pseudoclass-selector'> <b> <strong>Selektor pseudotriedy </strong> </b> </h2> <p dir='ltr'> <span>Používa sa na štýl špeciálneho typu stavu akéhokoľvek prvku. Napríklad- Používa sa na štýl prvku, keď nad ním prejde kurzor myši. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Jednobodku (:) používame v prípade a </span> <span>Selektor pseudotriedy </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Syntax: </strong> </b> </p> <pre>Selector:Pseudo-Class { Property: Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>h1:hover{ background-color: aqua; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors.webp' alt='CSS-Pseudo-Selector-Example-Output'> <p>Príklad výstupu CSS pseudoselektora </p> <h2 id='pseudoelement-selector'> <b> <strong>Selektor pseudoprvkov </strong> </b> </h2> <p dir='ltr'> <span>Používa sa na úpravu akejkoľvek konkrétnej časti prvku. Napríklad - Používa sa na úpravu prvého písmena alebo prvého riadku akéhokoľvek prvku. </span> </p> <p dir='ltr'> <b> <strong>Poznámka: </strong> </b> <span>Dvojbodku (::) používame v prípade a </span> <span>Selektor pseudoprvkov </span> <span>. </span> </p> <p dir='ltr'> <b> <strong>Syntax: </strong> </b> </p> <pre>Selector:Pseudo-Element{ Property:Value; } </pre> <h3> <b> <strong>CSS: </strong> </b> </h3> <pre>p::first-line{ background-color: goldenrod; } </pre> <p dir='ltr'> <b> <strong>Výkon: </strong> </b> </p> <img src='//techcodeview.com/img/css-questions/50/css-selectors-7.webp' alt='CSS-Pseudo-Element-Selector-Example-Output'> <p>Príklad výstupu selektora Pseudoprvku CSS </p> <p dir='ltr'> <br> </p> <br> <br>
</div>
<!-- Article Footer with Prominent Share Buttons -->
<div class="px-6 md:px-8 py-8 bg-slate-50 dark:bg-slate-900/50 border-t border-slate-200 dark:border-slate-700/50">
<div class="flex flex-col sm:flex-row items-center justify-between gap-6">
<h4 class="text-base font-bold text-slate-700 dark:text-slate-300 uppercase tracking-wide flex items-center gap-2">
<i class="fa fa-share-alt text-tech-500"> </i>
Zdieľať </h4>
<div class="flex flex-wrap justify-center gap-3">
<!-- Twitter -->
<a href="https://twitter.com/intent/tweet?text=Selektor CSS&url=https://www.techcodeview.com/sk/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#1DA1F2]/10 text-[#1DA1F2] hover:bg-[#1DA1F2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-twitter text-lg"> </i>
<span class="hidden sm:inline">Twitter </span>
</a>
<!-- Facebook -->
<a href="https://www.facebook.com/sharer/sharer.php?u=https://www.techcodeview.com/sk/css-selectors"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#4267B2]/10 text-[#4267B2] hover:bg-[#4267B2] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-facebook text-lg"> </i>
<span class="hidden sm:inline">Facebook </span>
</a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/shareArticle?mini=true&url=https://www.techcodeview.com/sk/css-selectors&title=Selektor CSS"
target="_blank" rel="noopener noreferrer"
class="flex items-center gap-2 px-6 py-3 rounded-xl bg-[#0077b5]/10 text-[#0077b5] hover:bg-[#0077b5] hover:text-white transition-all duration-300 font-bold text-sm">
<i class="fa fa-linkedin text-lg"> </i>
<span class="hidden sm:inline">LinkedIn </span>
</a>
</div>
</div>
</div>
</article>
<!-- Comments Placeholder / Random Articles -->
<div class="mt-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-6 md:p-8 shadow-sm">
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-6 uppercase tracking-wide border-b border-slate-200 dark:border-slate-700 pb-2">
Mohlo By Sa Vám Páčiť </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="group">
<a href="/sk/roman-numerals-1-100" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/maths/75/roman-numerals-1-100.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rímske číslice 1 až 100" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sk/roman-numerals-1-100">Rímske číslice 1 až 100 </a>
</h4>
</div> <div class="group">
<a href="/sk/constants-c" class="block aspect-video rounded-lg overflow-hidden bg-slate-200 dark:bg-slate-700 mb-3">
<img loading="lazy" src="https://techcodeview.com/img/c-basics/14/constants-c.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Konštanty v C" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</a>
<h4 class="font-bold text-slate-900 dark:text-white leading-tight group-hover:text-tech-500 transition-colors">
<a href="/sk/constants-c">Konštanty v C </a>
</h4>
</div>
</div>
</div>
</div>
<!-- SECONDARY COLUMN (SIDEBAR) -->
<!-- Aside Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Best Articles Widget -->
<div class="rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 shadow-sm">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide flex items-center">
<span class="mr-2 h-2 w-2 rounded-full bg-tech-500"> </span>
Najlepšie Články </h2>
</div>
<!-- Owl Carousel Preserved Container -->
<div id="owl-carousel-3" class="owl-carousel owl-theme center-owl-nav">
<!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/database-schema">
<img src="https://techcodeview.com/img/blog/34/database-schema.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Schéma databázy" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/database-schema" class="hover:text-tech-500 transition-colors line-clamp-3">Schéma databázy </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/difference-between-lcd">
<img src="https://techcodeview.com/img/differences/19/difference-between-lcd.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rozdiel medzi LCD a LED" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/difference-between-lcd" class="hover:text-tech-500 transition-colors line-clamp-3">Rozdiel medzi LCD a LED </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/mozilla-firefox">
<img src="https://techcodeview.com/img/shortcut-keys/30/mozilla-firefox.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mozilla Firefox" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/mozilla-firefox" class="hover:text-tech-500 transition-colors line-clamp-3">Mozilla Firefox </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/what-comes-after-trillion-13144">
<img src="https://techcodeview.com/img/blog/79/what-comes-after-trillion.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo príde po bilióne? Názvy veľkých čísel" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/what-comes-after-trillion-13144" class="hover:text-tech-500 transition-colors line-clamp-3">Čo príde po bilióne? Názvy veľkých čísel </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/what-is-electronegativity-1311160">
<img src="https://techcodeview.com/img/blog/06/what-is-electronegativity.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Čo je elektronegativita? Definícia, graf a trendy" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/what-is-electronegativity-1311160" class="hover:text-tech-500 transition-colors line-clamp-3">Čo je elektronegativita? Definícia, graf a trendy </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/act-expert-guide-whats-highest-possible-act-score-131300">
<img src="https://techcodeview.com/img/blog/46/act-expert-guide-whats-highest-possible-act-score.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="ACT Expert Guide: Aké je najvyššie možné skóre ACT?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/act-expert-guide-whats-highest-possible-act-score-131300" class="hover:text-tech-500 transition-colors line-clamp-3">ACT Expert Guide: Aké je najvyššie možné skóre ACT? </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/set-java">
<img src="https://techcodeview.com/img/java-util-package/63/set-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Nastavené v jazyku Java" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/set-java" class="hover:text-tech-500 transition-colors line-clamp-3">Nastavené v jazyku Java </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/understanding-atomic-radius-trends-131776">
<img src="https://techcodeview.com/img/blog/31/understanding-atomic-radius-trends.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pochopenie trendov atómového polomeru: 2 kľúčové princípy" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/understanding-atomic-radius-trends-131776" class="hover:text-tech-500 transition-colors line-clamp-3">Pochopenie trendov atómového polomeru: 2 kľúčové princípy </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/understanding-great-gatsby-ending-1311464">
<img src="https://techcodeview.com/img/blog/84/understanding-great-gatsby-ending.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Pochopenie Veľkého Gatsbyho konca a poslednej línie" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/understanding-great-gatsby-ending-1311464" class="hover:text-tech-500 transition-colors line-clamp-3">Pochopenie Veľkého Gatsbyho konca a poslednej línie </a>
</h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="flex items-start gap-4 p-2 hover:bg-slate-50 dark:hover:bg-slate-700/50 rounded-lg transition-colors">
<div class="w-20 h-20 shrink-0 overflow-hidden rounded-md bg-slate-200 dark:bg-slate-700">
<a href="/sk/how-should-you-spend-night-before-sat-131794">
<img src="https://techcodeview.com/img/blog/44/how-should-you-spend-night-before-sat.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako by ste mali stráviť noc pred SAT?" class="w-full h-full object-cover">
</a>
</div>
<div class="flex-1 min-w-0">
<h4 class="text-sm font-semibold text-slate-800 dark:text-slate-200 leading-snug">
<a href="/sk/how-should-you-spend-night-before-sat-131794" class="hover:text-tech-500 transition-colors line-clamp-3">Ako by ste mali stráviť noc pred SAT? </a>
</h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
<!-- Categories -->
<div class="mt-8 mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Kategórie </h2>
</div>
<div class="flex flex-wrap gap-2">
<a href="/sk/blog/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Blog
</a> <a href="/sk/java-conversion/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Konverzia Java
</a> <a href="/sk/maths/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Matematika
</a> <a href="/sk/java-collections/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Kolekcie Java
</a> <a href="/sk/differences/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Rozdiely
</a> <a href="/sk/java-string/" class="inline-block px-3 py-1 bg-slate-100 dark:bg-slate-700 text-xs font-medium text-slate-600 dark:text-slate-300 rounded-full hover:bg-tech-500 hover:text-white transition-colors">
Java Reťazec
</a>
</div>
<!-- Interesting Articles Widget -->
<div class="mt-8">
<div class="mb-4 border-b border-slate-100 dark:border-slate-700 pb-2">
<h2 class="text-lg font-bold text-slate-900 dark:text-white uppercase tracking-wide">Zaujímavé Články </h2>
</div>
<div id="owl-carousel-4" class="owl-carousel owl-theme">
<!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/94/capricorn-moon-sign-what-you-should-know.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Mesačné znamenie Kozorožec: Čo by ste mali vedieť" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/capricorn-moon-sign-what-you-should-know-131756">Mesačné znamenie Kozorožec: Čo by ste mali vedieť </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/blog/08/how-identify-10-different-types-clouds.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako rozpoznať 10 rôznych typov oblakov" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/blog/">Blog </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/how-identify-10-different-types-clouds-131912">Ako rozpoznať 10 rôznych typov oblakov </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/java-tutorial/13/spy-number-java.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Číslo špióna v jazyku Java" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/java-tutorial/">Výukový Program Java </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/spy-number-java">Číslo špióna v jazyku Java </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/geeks-premier-league-2023/28/difference-between-cougar.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Rozdiel medzi Cougar a Panther" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/geeks-premier-league-2023-cat/">Geeks Premier League 2023 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/difference-between-cougar">Rozdiel medzi Cougar a Panther </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/ds-tutorial/26/queue.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Fronta" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/ds-tutorial/">Návod Ds </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/queue">Fronta </a> </h4>
</div>
</article>
<!-- /ARTICLE --> <!-- ARTICLE -->
<article class="relative aspect-video rounded-lg overflow-hidden group mb-2">
<div class="absolute inset-0">
<img src="https://techcodeview.com/img/geeks-premier-league-2022/98/how-create-shell-script-linux.webp" onerror="this.onerror=null; this.src='https://techcodeview.com/template/assets/images/unnamed.webp'" alt="Ako vytvoriť skript Shell v linuxe" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent"> </div>
</div>
<div class="absolute bottom-0 left-0 p-4">
<div class="text-xs text-tech-400 font-bold mb-1"> <a href="/sk/geeks-premier-league-2022-cat/">Geeks-Premier-League-2022 </a> </div>
<h4 class="text-sm font-bold text-white leading-tight"> <a href="/sk/how-create-shell-script-linux">Ako vytvoriť skript Shell v linuxe </a> </h4>
</div>
</article>
<!-- /ARTICLE -->
</div>
</div>
</div>
</div>
<!-- /Aside Column --> </div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<span class="footer-links">
Copyright ©2026 Všetky Práva Vyhradené |
<a href="//www.techcodeview.com/tr/">techcodeview.com </a> |
<a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Odmietnutie Zodpovednosti </a> |
<a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">O Nás </a> |
<a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Zásady Ochrany Osobných Údajov </a>
</span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"> </script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"> </script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"> </script>
<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
#toTopBtn {
position: fixed; bottom: 25px; right: 25px; z-index: 9999; opacity: 0; visibility: hidden; background-color: #0ea5e9; color: white; border: none; border-radius: 8px; width: 50px; height: 50px; font-size: 24px; cursor: pointer; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
#toTopBtn:hover { background-color: #0284c7; }
`,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>