Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="bg">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="theme-color" content="#f5f7fb">
- <title>CSS селектори и псевдокласове</title>
- <style>
- /* Задава светла цветова схема за страницата */
- :root {
- color-scheme: light;
- }
- /* Задава общия вид и цвета на фона */
- * {
- box-sizing: border-box;
- }
- body {
- margin: 0;
- background: #f5f7fb;
- color: #172033;
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
- line-height: 1.6;
- }
- /* Всеки елемент main е подреден в колона */
- main {
- width: min(1120px, calc(100% - 40px));
- margin: 0 auto;
- padding: 48px 0 80px;
- }
- /* Общ стил за всеки параграф; по-специфичните правила по-долу го променят */
- p {
- margin: 0 0 12px;
- color: #667085;
- }
- h1, h2, h3 {
- line-height: 1.2;
- letter-spacing: -0.03em;
- }
- h1 {
- max-width: 780px;
- margin: 12px 0 16px;
- font-size: 4rem;
- }
- h3 {
- margin: 0 0 8px;
- font-size: 1.08rem;
- }
- .lead {
- max-width: 680px;
- font-size: 1.08rem;
- }
- /* Стилизира елемента с този клас */
- .card {
- padding: 12px;
- border: 1px solid #dce3ee;
- border-radius: 18px;
- background: #ffffff;
- box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
- }
- /* Правилото важи за навигацията с точно това id */
- #navigation {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- margin: 30px 0 42px;
- padding: 12px;
- border: 1px solid #dce3ee;
- border-radius: 14px;
- background: #ffffff;
- }
- #navigation a {
- padding: 8px 12px;
- border-radius: 9px;
- color: #667085;
- font-size: 0.9rem;
- font-weight: 700;
- text-decoration: none;
- }
- /* Съседният селектор избира всяка .card, поставена веднага след друга .card */
- .card + .card {
- margin-top: 16px;
- }
- /* Потомък: избира всеки параграф вътре в .card, включително вложените */
- .card p {
- color: #555f73;
- }
- /* Пряк наследник: избира само параграфите на първо ниво в .card */
- .card > p {
- padding: 2px;
- border-bottom: 3px solid #b8b0ff;
- }
- .section {
- margin-top: 54px;
- scroll-margin-top: 24px;
- }
- .section-intro {
- max-width: 700px;
- margin-bottom: 22px;
- }
- .demo-grid {
- display: grid;
- grid-template-columns: repeat(2, minmax(0, 1fr));
- gap: 16px;
- }
- .demo-card {
- min-width: 0;
- }
- .demo-card p {
- margin-top: 12px;
- }
- .selector-label {
- display: inline-flex;
- align-items: center;
- margin-bottom: 12px;
- padding: 5px 9px;
- border-radius: 7px;
- background: #efedff;
- color: #4436ae;
- font: 700 0.86rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
- }
- .code {
- display: block;
- overflow-x: auto;
- margin-top: 14px;
- padding: 12px 14px;
- border: 1px solid #e9edf4;
- border-radius: 10px;
- background: #f8f9fc;
- color: #35405a;
- font: 0.82rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
- white-space: pre;
- }
- /* Променя фона, когато курсорът е върху връзката */
- #navigation a:hover {
- background: #efedff;
- color: #6758d9;
- }
- /* Добавя плавен преход при промяна на картата */
- .hover-card {
- transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
- }
- /* Повдига картата и подчертава сянката при посочване */
- .card:hover {
- transform: translateY(-4px);
- border-color: #a49cf5;
- box-shadow: 0 22px 44px rgb(103 88 217 / 16%);
- }
- /* Избира само текстовите полета и им задава общ вид */
- input[type="text"] {
- width: 100%;
- padding: 11px 12px;
- border: 1px solid #cbd3e1;
- border-radius: 10px;
- background: white;
- color: #172033;
- font: inherit;
- }
- /* Показва кое поле в момента е активно */
- input:focus {
- border-color: #6758d9;
- outline: 3px solid rgb(103 88 217 / 16%);
- }
- /* Видим контур при навигация с клавиатура */
- input:focus-visible,
- button:focus-visible,
- a:focus-visible {
- outline: 3px solid #8b80ff;
- outline-offset: 3px;
- }
- .button-row {
- display: flex;
- flex-wrap: wrap;
- gap: 10px;
- }
- button {
- padding: 10px 15px;
- border: 0;
- border-radius: 10px;
- background: #6758d9;
- color: white;
- font-family: inherit;
- font-size: 0.92rem;
- font-weight: 700;
- line-height: 1.4;
- cursor: pointer;
- transition: transform 120ms ease, background 120ms ease;
- }
- /* Променя цвета на бутона, когато курсорът е върху него */
- button:hover:not(:disabled) {
- background: #5445c4;
- }
- /* Променя бутона, докато е натиснат */
- button:active {
- transform: scale(0.97);
- background: #4436ae;
- }
- /* Показва, че изключеният бутон не може да се използва */
- button:disabled {
- background: #c7ccda;
- color: #626b7c;
- cursor: not-allowed;
- }
- .check-option {
- display: flex;
- align-items: center;
- gap: 10px;
- width: fit-content;
- padding: 10px 12px;
- border: 1px solid #dce3ee;
- border-radius: 10px;
- cursor: pointer;
- }
- /* Когато квадратчето е отметнато, оцветява етикета му */
- .check-option:has(input:checked) {
- border-color: #75cdb0;
- background: #dff7ee;
- color: #175d48;
- }
- input[type="checkbox"] {
- width: 18px;
- height: 18px;
- accent-color: #16805e;
- }
- .list-demo, .list-demo-2 {
- display: grid;
- gap: 8px;
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .list-demo li, .list-demo-2 li{
- padding: 10px 12px;
- border: 1px solid #dce3ee;
- border-radius: 9px;
- background: white;
- }
- /* Избира първия елемент сред неговите братя и сестри */
- .list-demo li:first-child {
- border-color: #a49cf5;
- background: #efedff;
- }
- /* Избира последния елемент сред неговите братя и сестри */
- .list-demo li:last-child {
- border-color: #75cdb0;
- background: #dff7ee;
- }
- /* Избира всеки втори елемент; броенето започва от 1 */
- .list-demo-2 li:nth-child(2n) {
- box-shadow: 0px 6px 14px -8px black;
- }
- /* Избира всички елементи, които нямат клас .muted */
- .not-demo p:not(.muted) {
- color: #175d48;
- font-weight: 700;
- }
- .muted {
- color: #98a1b1;
- }
- .selector-table {
- width: 100%;
- border-collapse: collapse;
- overflow: hidden;
- border-radius: 14px;
- background: white;
- box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
- }
- .selector-table th,
- .selector-table td {
- padding: 13px 16px;
- border-bottom: 1px solid #e9edf4;
- text-align: left;
- vertical-align: top;
- }
- .selector-table th {
- background: #f0efff;
- color: #4436ae;
- font-size: 0.83rem;
- letter-spacing: 0.04em;
- text-transform: uppercase;
- }
- .selector-table td:first-child {
- width: 34%;
- color: #35405a;
- font: 700 0.86rem ui-monospace, SFMono-Regular, Consolas, monospace;
- }
- .selector-table tr:last-child td {
- border-bottom: 0;
- }
- .note {
- margin-top: 16px;
- padding: 14px 16px;
- border: 1px solid #e5dcaa;
- border-radius: 12px;
- background: #fffbea;
- color: #685720;
- }
- /* На малък екран подрежда примерите в една колона */
- @media (max-width: 720px) {
- main {
- width: min(100% - 28px, 560px);
- padding-top: 30px;
- }
- .demo-grid {
- grid-template-columns: 1fr;
- }
- .selector-table th,
- .selector-table td {
- padding: 10px;
- }
- }
- </style>
- </head>
- <body>
- <main>
- <header>
- <h1>CSS псевдоселектори</h1>
- <p class="lead">Селекторите посочват кои HTML елементи да получат даден стил.</p>
- </header>
- <nav id="navigation">
- <a href="#basic">Основни селектори</a>
- <a href="#relations">Връзки между елементи</a>
- <a href="#interaction">Взаимодействие</a>
- <a href="#structure">Структура</a>
- <a href="#reference">Справочник</a>
- </nav>
- <section class="section" id="basic">
- <div class="section-intro">
- <p>Тези селектори избират елемент по неговия HTML таг, клас, идентификатор или атрибут.</p>
- </div>
- <div class="demo-grid">
- <article class="card demo-card">
- <span class="selector-label">p { }</span>
- <h3>Селектор по елемент</h3>
- <p>Това е параграф. Общото правило p задава цвета и разстоянието му.</p>
- <code class="code">p {
- margin: 0 0 12px;
- color: #667085;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">.card { }</span>
- <h3>Селектор по клас</h3>
- <p>Тази кутия има клас card. Точка пред името означава, че избираме клас.</p>
- <code class="code">.card {
- padding: 12px;
- border: 1px solid #dce3ee;
- border-radius: 18px;
- background: #ffffff;
- box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">#navigation { }</span>
- <h3>Селектор по идентификатор</h3>
- <p>Горната лента за навигация има id="navigation". Символът # избира този id.</p>
- <code class="code">#navigation {
- display: flex;
- gap: 10px;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">input[type="text"] { }</span>
- <h3>Селектор по атрибут</h3>
- <p>Това правило важи само за input елементи с атрибут type="text".</p>
- <input type="text" placeholder="Поле за текст" aria-label="Поле за текст">
- <code class="code">input[type="text"] {
- border-radius: 10px;
- }</code>
- </article>
- </div>
- </section>
- <section class="section" id="relations">
- <div class="section-intro">
- <p>Интервалът избира наследници, знакът > избира преки деца, а знакът + избира непосредствения следващ съсед.</p>
- </div>
- <div class="demo-grid">
- <article class="card demo-card">
- <span class="selector-label">.card p { }</span>
- <h3>Всички параграфи в елемент с клас .card</h3>
- <p>Този параграф е пряк наследник на article.card</p>
- <div>
- <p>Този параграф е вложен в div, но пак е потомък на картата.</p>
- </div>
- <code class="code">.card p {
- color: #555f73;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">.card > p { }</span>
- <h3>Само преките параграфи</h3>
- <p>Този параграф е пряк наследник и има лилава линия отдолу.</p>
- <div>
- <p>Този е вложен в div и не получава линията отдолу.</p>
- </div>
- <code class="code">.card > p {
- padding: 2px;
- border-bottom: 3px solid #b8b0ff;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">.card + .card { }</span>
- <h3>Непосредствен следващ съсед</h3>
- <p>След тази карта идва друга карта. Правилото добавя отстояние над втората.</p>
- <code class="code">.card + .card {
- margin-top: 16px;
- }</code>
- </article>
- <article class="card demo-card hover-card">
- <span class="selector-label">.card:hover { }</span>
- <h3>Посочи тази карта</h3>
- <p>При задържане на курсора картата леко се повдига.</p>
- <code class="code">.card:hover {
- transform: translateY(-4px);
- border-color: #a49cf5;
- box-shadow: 0 22px 44px rgb(103 88 217 / 16%);
- }</code>
- </article>
- </div>
- </section>
- <section class="section" id="interaction">
- <div class="section-intro">
- <p>Псевдокласовете започват с двоеточие и избират елемент според текущото му състояние.</p>
- </div>
- <div class="demo-grid">
- <article class="card demo-card">
- <span class="selector-label">input:focus { }</span>
- <h3>Поле на фокус</h3>
- <p>Щракни в полето или стигни до него с клавиша Tab.</p>
- <input type="text" placeholder="Щракни или натисни Tab" aria-label="Поле на фокус">
- <code class="code">input:focus {
- border-color: #6758d9;
- outline: 3px solid rgb(103 88 217 / 16%);
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">:focus-visible</span>
- <h3>Фокус с клавиатура</h3>
- <p>Натисни Tab, за да преминеш към бутона и да видиш ясно очертание.</p>
- <div class="button-row">
- <button type="button">Пробвай с Tab</button>
- </div>
- <code class="code">button:focus-visible {
- outline: 3px solid #8b80ff;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">:hover · :active</span>
- <h3>Посочи и натисни</h3>
- <p>Задръж курсора върху бутона, после натисни и задръж мишката.</p>
- <div class="button-row">
- <button type="button">Интерактивен бутон</button>
- </div>
- <code class="code">button:hover:not(:disabled) {
- background: #5445c4;
- }
- button:active {
- transform: scale(0.97);
- background: #4436ae;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">button:disabled { }</span>
- <h3>Изключен бутон</h3>
- <p>Атрибутът disabled прави бутона неактивен.</p>
- <div class="button-row">
- <button type="button" disabled>Неактивен бутон</button>
- </div>
- <code class="code">button:disabled {
- cursor: not-allowed;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">:checked</span>
- <h3>Отметнато квадратче</h3>
- <p>Отметни квадратчето и етикетът ще се оцвети.</p>
- <label class="check-option">
- <input type="checkbox">
- Съгласен съм
- </label>
- <code class="code">.check-option:has(input:checked) {
- background: #dff7ee;
- }</code>
- </article>
- </div>
- </section>
- <section class="section" id="structure">
- <div class="section-intro">
- <p>:first-child, :last-child и :nth-child() избират елементи според позицията им сред съседите.</p>
- </div>
- <div class="demo-grid">
- <article class="card demo-card">
- <span class="selector-label">:first-child · :last-child</span>
- <h3>Първи и последен</h3>
- <ul class="list-demo">
- <li>Първи елемент</li>
- <li>Втори елемент</li>
- <li>Трети елемент</li>
- <li>Четвърти елемент</li>
- </ul>
- <code class="code">.list-demo li:first-child { background: #efedff; }
- .list-demo li:last-child { background: #dff7ee; }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">:nth-child(2n)</span>
- <h3>Всеки втори елемент</h3>
- <ul class="list-demo-2">
- <li>Първи ред</li>
- <li>Втори ред</li>
- <li>Трети ред</li>
- <li>Четвърти ред</li>
- </ul>
- <code class="code">.list-demo-2 li:nth-child(2n) {
- box-shadow: 0px 6px 14px -8px black;
- }</code>
- </article>
- <article class="card demo-card not-demo">
- <span class="selector-label">:not(.muted)</span>
- <h3>Изключване на клас</h3>
- <p>Този текст няма клас muted и става зелен.</p>
- <p class="muted">Този текст има клас muted и остава сив.</p>
- <code class="code">.not-demo p:not(.muted) {
- color: #175d48;
- font-weight: 700;
- }</code>
- </article>
- <article class="card demo-card">
- <span class="selector-label">:hover · :focus · :checked · :disabled</span>
- <h3>Накратко</h3>
- <p>:hover избира посочен елемент; :focus — активния; :checked — отметнатия; :disabled — изключения.</p>
- <div class="note">Псевдокласът е състояние или позиция на елемент. Селекторите с клас и идентификатор използват съответно . и #.</div>
- </article>
- </div>
- </section>
- <section class="section" id="reference">
- <table class="selector-table">
- <thead>
- <tr><th>Селектор</th><th>Какво избира</th></tr>
- </thead>
- <tbody>
- <tr><td>p</td><td>Всички елементи <p>.</td></tr>
- <tr><td>.card</td><td>Всички елементи с клас card.</td></tr>
- <tr><td>#navigation</td><td>Елемента с id navigation.</td></tr>
- <tr><td>.card p</td><td>Всеки параграф потомък на елемент с клас card.</td></tr>
- <tr><td>.card > p</td><td>Параграфите, които са преки деца на .card.</td></tr>
- <tr><td>.card + .card</td><td>Елемент с клас card, който следва непосредствено след друг .card.</td></tr>
- <tr><td>.card:hover</td><td>Карта, върху която е курсорът.</td></tr>
- <tr><td>input:focus</td><td>Поле за въвеждане, което в момента е на фокус.</td></tr>
- <tr><td>input[type="text"]</td><td>Поле input с атрибут type, чиято стойност е text.</td></tr>
- <tr><td>button:disabled</td><td>Бутон с атрибут disabled.</td></tr>
- <tr><td>:hover · :focus · :focus-visible · :active</td><td>Посочен, фокусиран, видимо фокусиран или натиснат елемент.</td></tr>
- <tr><td>:disabled · :checked</td><td>Изключен контрол или отметнато квадратче/радио бутон.</td></tr>
- <tr><td>:first-child · :last-child</td><td>Първия или последния наследник на родителя си.</td></tr>
- <tr><td>:nth-child(2n)</td><td>Всеки елемент на четна позиция; броенето започва от 1.</td></tr>
- <tr><td>:not(.muted)</td><td>Елемент, който не съвпада с посочения селектор.</td></tr>
- </tbody>
- </table>
- </section>
- </main>
- </body>
- </html>
Add Comment
Please, Sign In to add comment