lemansky

Untitled

Oct 28th, 2026
31
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 24.79 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="bg">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta name="theme-color" content="#f5f7fb">
  7.     <title>CSS селектори и псевдокласове</title>
  8.     <style>
  9.         /* Задава светла цветова схема за страницата */
  10.         :root {
  11.             color-scheme: light;
  12.         }
  13.  
  14.         /* Задава общия вид и цвета на фона */
  15.         * {
  16.             box-sizing: border-box;
  17.         }
  18.  
  19.         body {
  20.             margin: 0;
  21.             background: #f5f7fb;
  22.             color: #172033;
  23.             font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  24.             line-height: 1.6;
  25.         }
  26.  
  27.         /* Всеки елемент main е подреден в колона */
  28.         main {
  29.             width: min(1120px, calc(100% - 40px));
  30.             margin: 0 auto;
  31.             padding: 48px 0 80px;
  32.         }
  33.  
  34.         /* Общ стил за всеки параграф; по-специфичните правила по-долу го променят */
  35.         p {
  36.             margin: 0 0 12px;
  37.             color: #667085;
  38.         }
  39.  
  40.         h1, h2, h3 {
  41.             line-height: 1.2;
  42.             letter-spacing: -0.03em;
  43.         }
  44.  
  45.         h1 {
  46.             max-width: 780px;
  47.             margin: 12px 0 16px;
  48.             font-size: 4rem;
  49.         }
  50.  
  51.         h3 {
  52.             margin: 0 0 8px;
  53.             font-size: 1.08rem;
  54.         }
  55.  
  56.         .lead {
  57.             max-width: 680px;
  58.             font-size: 1.08rem;
  59.         }
  60.  
  61.         /* Стилизира елемента с този клас */
  62.         .card {
  63.             padding: 12px;
  64.             border: 1px solid #dce3ee;
  65.             border-radius: 18px;
  66.             background: #ffffff;
  67.             box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
  68.         }
  69.  
  70.         /* Правилото важи за навигацията с точно това id */
  71.         #navigation {
  72.             display: flex;
  73.             flex-wrap: wrap;
  74.             gap: 10px;
  75.             margin: 30px 0 42px;
  76.             padding: 12px;
  77.             border: 1px solid #dce3ee;
  78.             border-radius: 14px;
  79.             background: #ffffff;
  80.         }
  81.  
  82.         #navigation a {
  83.             padding: 8px 12px;
  84.             border-radius: 9px;
  85.             color: #667085;
  86.             font-size: 0.9rem;
  87.             font-weight: 700;
  88.             text-decoration: none;
  89.         }
  90.  
  91.         /* Съседният селектор избира всяка .card, поставена веднага след друга .card */
  92.         .card + .card {
  93.             margin-top: 16px;
  94.         }
  95.  
  96.         /* Потомък: избира всеки параграф вътре в .card, включително вложените */
  97.         .card p {
  98.             color: #555f73;
  99.         }
  100.  
  101.         /* Пряк наследник: избира само параграфите на първо ниво в .card */
  102.         .card > p {
  103.             padding: 2px;
  104.             border-bottom: 3px solid #b8b0ff;
  105.         }
  106.  
  107.         .section {
  108.             margin-top: 54px;
  109.             scroll-margin-top: 24px;
  110.         }
  111.  
  112.         .section-intro {
  113.             max-width: 700px;
  114.             margin-bottom: 22px;
  115.         }
  116.  
  117.         .demo-grid {
  118.             display: grid;
  119.             grid-template-columns: repeat(2, minmax(0, 1fr));
  120.             gap: 16px;
  121.         }
  122.  
  123.         .demo-card {
  124.             min-width: 0;
  125.         }
  126.  
  127.         .demo-card p {
  128.             margin-top: 12px;
  129.         }
  130.  
  131.         .selector-label {
  132.             display: inline-flex;
  133.             align-items: center;
  134.             margin-bottom: 12px;
  135.             padding: 5px 9px;
  136.             border-radius: 7px;
  137.             background: #efedff;
  138.             color: #4436ae;
  139.             font: 700 0.86rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  140.         }
  141.  
  142.         .code {
  143.             display: block;
  144.             overflow-x: auto;
  145.             margin-top: 14px;
  146.             padding: 12px 14px;
  147.             border: 1px solid #e9edf4;
  148.             border-radius: 10px;
  149.             background: #f8f9fc;
  150.             color: #35405a;
  151.             font: 0.82rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
  152.             white-space: pre;
  153.         }
  154.  
  155.         /* Променя фона, когато курсорът е върху връзката */
  156.         #navigation a:hover {
  157.             background: #efedff;
  158.             color: #6758d9;
  159.         }
  160.  
  161.         /* Добавя плавен преход при промяна на картата */
  162.         .hover-card {
  163.             transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  164.         }
  165.  
  166.         /* Повдига картата и подчертава сянката при посочване */
  167.         .card:hover {
  168.             transform: translateY(-4px);
  169.             border-color: #a49cf5;
  170.             box-shadow: 0 22px 44px rgb(103 88 217 / 16%);
  171.         }
  172.  
  173.         /* Избира само текстовите полета и им задава общ вид */
  174.         input[type="text"] {
  175.             width: 100%;
  176.             padding: 11px 12px;
  177.             border: 1px solid #cbd3e1;
  178.             border-radius: 10px;
  179.             background: white;
  180.             color: #172033;
  181.             font: inherit;
  182.         }
  183.  
  184.         /* Показва кое поле в момента е активно */
  185.         input:focus {
  186.             border-color: #6758d9;
  187.             outline: 3px solid rgb(103 88 217 / 16%);
  188.         }
  189.  
  190.         /* Видим контур при навигация с клавиатура */
  191.         input:focus-visible,
  192.         button:focus-visible,
  193.         a:focus-visible {
  194.             outline: 3px solid #8b80ff;
  195.             outline-offset: 3px;
  196.         }
  197.  
  198.         .button-row {
  199.             display: flex;
  200.             flex-wrap: wrap;
  201.             gap: 10px;
  202.         }
  203.  
  204.         button {
  205.             padding: 10px 15px;
  206.             border: 0;
  207.             border-radius: 10px;
  208.             background: #6758d9;
  209.             color: white;
  210.             font-family: inherit;
  211.             font-size: 0.92rem;
  212.             font-weight: 700;
  213.             line-height: 1.4;
  214.             cursor: pointer;
  215.             transition: transform 120ms ease, background 120ms ease;
  216.         }
  217.  
  218.         /* Променя цвета на бутона, когато курсорът е върху него */
  219.         button:hover:not(:disabled) {
  220.             background: #5445c4;
  221.         }
  222.  
  223.         /* Променя бутона, докато е натиснат */
  224.         button:active {
  225.             transform: scale(0.97);
  226.             background: #4436ae;
  227.         }
  228.  
  229.         /* Показва, че изключеният бутон не може да се използва */
  230.         button:disabled {
  231.             background: #c7ccda;
  232.             color: #626b7c;
  233.             cursor: not-allowed;
  234.         }
  235.  
  236.         .check-option {
  237.             display: flex;
  238.             align-items: center;
  239.             gap: 10px;
  240.             width: fit-content;
  241.             padding: 10px 12px;
  242.             border: 1px solid #dce3ee;
  243.             border-radius: 10px;
  244.             cursor: pointer;
  245.         }
  246.  
  247.         /* Когато квадратчето е отметнато, оцветява етикета му */
  248.         .check-option:has(input:checked) {
  249.             border-color: #75cdb0;
  250.             background: #dff7ee;
  251.             color: #175d48;
  252.         }
  253.  
  254.         input[type="checkbox"] {
  255.             width: 18px;
  256.             height: 18px;
  257.             accent-color: #16805e;
  258.         }
  259.  
  260.         .list-demo, .list-demo-2 {
  261.             display: grid;
  262.             gap: 8px;
  263.             margin: 0;
  264.             padding: 0;
  265.             list-style: none;
  266.         }
  267.  
  268.         .list-demo li, .list-demo-2 li{
  269.             padding: 10px 12px;
  270.             border: 1px solid #dce3ee;
  271.             border-radius: 9px;
  272.             background: white;
  273.         }
  274.  
  275.         /* Избира първия елемент сред неговите братя и сестри */
  276.         .list-demo li:first-child {
  277.             border-color: #a49cf5;
  278.             background: #efedff;
  279.         }
  280.  
  281.         /* Избира последния елемент сред неговите братя и сестри */
  282.         .list-demo li:last-child {
  283.             border-color: #75cdb0;
  284.             background: #dff7ee;
  285.         }
  286.  
  287.         /* Избира всеки втори елемент; броенето започва от 1 */
  288.         .list-demo-2 li:nth-child(2n) {
  289.             box-shadow: 0px 6px 14px -8px black;
  290.         }
  291.  
  292.         /* Избира всички елементи, които нямат клас .muted */
  293.         .not-demo p:not(.muted) {
  294.             color: #175d48;
  295.             font-weight: 700;
  296.         }
  297.  
  298.         .muted {
  299.             color: #98a1b1;
  300.         }
  301.  
  302.         .selector-table {
  303.             width: 100%;
  304.             border-collapse: collapse;
  305.             overflow: hidden;
  306.             border-radius: 14px;
  307.             background: white;
  308.             box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
  309.         }
  310.  
  311.         .selector-table th,
  312.         .selector-table td {
  313.             padding: 13px 16px;
  314.             border-bottom: 1px solid #e9edf4;
  315.             text-align: left;
  316.             vertical-align: top;
  317.         }
  318.  
  319.         .selector-table th {
  320.             background: #f0efff;
  321.             color: #4436ae;
  322.             font-size: 0.83rem;
  323.             letter-spacing: 0.04em;
  324.             text-transform: uppercase;
  325.         }
  326.  
  327.         .selector-table td:first-child {
  328.             width: 34%;
  329.             color: #35405a;
  330.             font: 700 0.86rem ui-monospace, SFMono-Regular, Consolas, monospace;
  331.         }
  332.  
  333.         .selector-table tr:last-child td {
  334.             border-bottom: 0;
  335.         }
  336.  
  337.         .note {
  338.             margin-top: 16px;
  339.             padding: 14px 16px;
  340.             border: 1px solid #e5dcaa;
  341.             border-radius: 12px;
  342.             background: #fffbea;
  343.             color: #685720;
  344.         }
  345.  
  346.         /* На малък екран подрежда примерите в една колона */
  347.         @media (max-width: 720px) {
  348.             main {
  349.                 width: min(100% - 28px, 560px);
  350.                 padding-top: 30px;
  351.             }
  352.  
  353.             .demo-grid {
  354.                 grid-template-columns: 1fr;
  355.             }
  356.  
  357.             .selector-table th,
  358.             .selector-table td {
  359.                 padding: 10px;
  360.             }
  361.         }
  362.     </style>
  363. </head>
  364. <body>
  365.     <main>
  366.         <header>
  367.             <h1>CSS псевдоселектори</h1>
  368.             <p class="lead">Селекторите посочват кои HTML елементи да получат даден стил.</p>
  369.         </header>
  370.  
  371.         <nav id="navigation">
  372.             <a href="#basic">Основни селектори</a>
  373.             <a href="#relations">Връзки между елементи</a>
  374.             <a href="#interaction">Взаимодействие</a>
  375.             <a href="#structure">Структура</a>
  376.             <a href="#reference">Справочник</a>
  377.         </nav>
  378.  
  379.         <section class="section" id="basic">
  380.             <div class="section-intro">
  381.                 <p>Тези селектори избират елемент по неговия HTML таг, клас, идентификатор или атрибут.</p>
  382.             </div>
  383.             <div class="demo-grid">
  384.                 <article class="card demo-card">
  385.                     <span class="selector-label">p { }</span>
  386.                     <h3>Селектор по елемент</h3>
  387.                     <p>Това е параграф. Общото правило p задава цвета и разстоянието му.</p>
  388.                     <code class="code">p {
  389.   margin: 0 0 12px;
  390.   color: #667085;
  391. }</code>
  392.                 </article>
  393.                 <article class="card demo-card">
  394.                     <span class="selector-label">.card { }</span>
  395.                     <h3>Селектор по клас</h3>
  396.                     <p>Тази кутия има клас card. Точка пред името означава, че избираме клас.</p>
  397.                     <code class="code">.card {
  398.   padding: 12px;
  399.   border: 1px solid #dce3ee;
  400.   border-radius: 18px;
  401.   background: #ffffff;
  402.   box-shadow: 0 18px 50px rgb(30 43 75 / 8%);
  403. }</code>
  404.                 </article>
  405.                 <article class="card demo-card">
  406.                     <span class="selector-label">#navigation { }</span>
  407.                     <h3>Селектор по идентификатор</h3>
  408.                     <p>Горната лента за навигация има id="navigation". Символът # избира този id.</p>
  409.                     <code class="code">#navigation {
  410.   display: flex;
  411.   gap: 10px;
  412. }</code>
  413.                 </article>
  414.                 <article class="card demo-card">
  415.                     <span class="selector-label">input[type="text"] { }</span>
  416.                     <h3>Селектор по атрибут</h3>
  417.                     <p>Това правило важи само за input елементи с атрибут type="text".</p>
  418.                     <input type="text" placeholder="Поле за текст" aria-label="Поле за текст">
  419.                     <code class="code">input[type="text"] {
  420.   border-radius: 10px;
  421. }</code>
  422.                 </article>
  423.             </div>
  424.         </section>
  425.  
  426.         <section class="section" id="relations">
  427.             <div class="section-intro">
  428.                 <p>Интервалът избира наследници, знакът &gt; избира преки деца, а знакът + избира непосредствения следващ съсед.</p>
  429.             </div>
  430.             <div class="demo-grid">
  431.                 <article class="card demo-card">
  432.                     <span class="selector-label">.card p { }</span>
  433.                     <h3>Всички параграфи в елемент с клас .card</h3>
  434.                     <p>Този параграф е пряк наследник на article.card</p>
  435.                     <div>
  436.                         <p>Този параграф е вложен в div, но пак е потомък на картата.</p>
  437.                     </div>
  438.                     <code class="code">.card p {
  439.   color: #555f73;
  440. }</code>
  441.                 </article>
  442.                 <article class="card demo-card">
  443.                     <span class="selector-label">.card &gt; p { }</span>
  444.                     <h3>Само преките параграфи</h3>
  445.                     <p>Този параграф е пряк наследник и има лилава линия отдолу.</p>
  446.                     <div>
  447.                         <p>Този е вложен в div и не получава линията отдолу.</p>
  448.                     </div>
  449.                     <code class="code">.card &gt; p {
  450.   padding: 2px;
  451.   border-bottom: 3px solid #b8b0ff;
  452. }</code>
  453.                 </article>
  454.                 <article class="card demo-card">
  455.                     <span class="selector-label">.card + .card { }</span>
  456.                     <h3>Непосредствен следващ съсед</h3>
  457.                     <p>След тази карта идва друга карта. Правилото добавя отстояние над втората.</p>
  458.                     <code class="code">.card + .card {
  459.   margin-top: 16px;
  460. }</code>
  461.                 </article>
  462.                 <article class="card demo-card hover-card">
  463.                     <span class="selector-label">.card:hover { }</span>
  464.                     <h3>Посочи тази карта</h3>
  465.                     <p>При задържане на курсора картата леко се повдига.</p>
  466.                     <code class="code">.card:hover {
  467.   transform: translateY(-4px);
  468.   border-color: #a49cf5;
  469.   box-shadow: 0 22px 44px rgb(103 88 217 / 16%);
  470. }</code>
  471.                 </article>
  472.             </div>
  473.         </section>
  474.  
  475.         <section class="section" id="interaction">
  476.             <div class="section-intro">
  477.                 <p>Псевдокласовете започват с двоеточие и избират елемент според текущото му състояние.</p>
  478.             </div>
  479.             <div class="demo-grid">
  480.                 <article class="card demo-card">
  481.                     <span class="selector-label">input:focus { }</span>
  482.                     <h3>Поле на фокус</h3>
  483.                     <p>Щракни в полето или стигни до него с клавиша Tab.</p>
  484.                     <input type="text" placeholder="Щракни или натисни Tab" aria-label="Поле на фокус">
  485.                     <code class="code">input:focus {
  486.   border-color: #6758d9;
  487.   outline: 3px solid rgb(103 88 217 / 16%);
  488. }</code>
  489.                 </article>
  490.                 <article class="card demo-card">
  491.                     <span class="selector-label">:focus-visible</span>
  492.                     <h3>Фокус с клавиатура</h3>
  493.                     <p>Натисни Tab, за да преминеш към бутона и да видиш ясно очертание.</p>
  494.                     <div class="button-row">
  495.                         <button type="button">Пробвай с Tab</button>
  496.                     </div>
  497.                     <code class="code">button:focus-visible {
  498.   outline: 3px solid #8b80ff;
  499. }</code>
  500.                 </article>
  501.                 <article class="card demo-card">
  502.                     <span class="selector-label">:hover · :active</span>
  503.                     <h3>Посочи и натисни</h3>
  504.                     <p>Задръж курсора върху бутона, после натисни и задръж мишката.</p>
  505.                     <div class="button-row">
  506.                         <button type="button">Интерактивен бутон</button>
  507.                     </div>
  508.                     <code class="code">button:hover:not(:disabled) {
  509.   background: #5445c4;
  510. }
  511. button:active {
  512.   transform: scale(0.97);
  513.   background: #4436ae;
  514. }</code>
  515.                 </article>
  516.                 <article class="card demo-card">
  517.                     <span class="selector-label">button:disabled { }</span>
  518.                     <h3>Изключен бутон</h3>
  519.                     <p>Атрибутът disabled прави бутона неактивен.</p>
  520.                     <div class="button-row">
  521.                         <button type="button" disabled>Неактивен бутон</button>
  522.                     </div>
  523.                     <code class="code">button:disabled {
  524.   cursor: not-allowed;
  525. }</code>
  526.                 </article>
  527.                 <article class="card demo-card">
  528.                     <span class="selector-label">:checked</span>
  529.                     <h3>Отметнато квадратче</h3>
  530.                     <p>Отметни квадратчето и етикетът ще се оцвети.</p>
  531.                     <label class="check-option">
  532.                         <input type="checkbox">
  533.                         Съгласен съм
  534.                     </label>
  535.                     <code class="code">.check-option:has(input:checked) {
  536.   background: #dff7ee;
  537. }</code>
  538.                 </article>
  539.             </div>
  540.         </section>
  541.  
  542.         <section class="section" id="structure">
  543.             <div class="section-intro">
  544.                 <p>:first-child, :last-child и :nth-child() избират елементи според позицията им сред съседите.</p>
  545.             </div>
  546.             <div class="demo-grid">
  547.                 <article class="card demo-card">
  548.                     <span class="selector-label">:first-child · :last-child</span>
  549.                     <h3>Първи и последен</h3>
  550.                     <ul class="list-demo">
  551.                         <li>Първи елемент</li>
  552.                         <li>Втори елемент</li>
  553.                         <li>Трети елемент</li>
  554.                         <li>Четвърти елемент</li>
  555.                     </ul>
  556.                     <code class="code">.list-demo li:first-child { background: #efedff; }
  557. .list-demo li:last-child { background: #dff7ee; }</code>
  558.                 </article>
  559.                 <article class="card demo-card">
  560.                     <span class="selector-label">:nth-child(2n)</span>
  561.                     <h3>Всеки втори елемент</h3>
  562.                     <ul class="list-demo-2">
  563.                         <li>Първи ред</li>
  564.                         <li>Втори ред</li>
  565.                         <li>Трети ред</li>
  566.                         <li>Четвърти ред</li>
  567.                     </ul>
  568.                     <code class="code">.list-demo-2 li:nth-child(2n) {
  569.     box-shadow: 0px 6px 14px -8px black;
  570. }</code>
  571.                 </article>
  572.                 <article class="card demo-card not-demo">
  573.                     <span class="selector-label">:not(.muted)</span>
  574.                     <h3>Изключване на клас</h3>
  575.                     <p>Този текст няма клас muted и става зелен.</p>
  576.                     <p class="muted">Този текст има клас muted и остава сив.</p>
  577.                     <code class="code">.not-demo p:not(.muted) {
  578.   color: #175d48;
  579.   font-weight: 700;
  580. }</code>
  581.                 </article>
  582.                 <article class="card demo-card">
  583.                     <span class="selector-label">:hover · :focus · :checked · :disabled</span>
  584.                     <h3>Накратко</h3>
  585.                     <p>:hover избира посочен елемент; :focus — активния; :checked — отметнатия; :disabled — изключения.</p>
  586.                     <div class="note">Псевдокласът е състояние или позиция на елемент. Селекторите с клас и идентификатор използват съответно . и #.</div>
  587.                 </article>
  588.             </div>
  589.         </section>
  590.  
  591.         <section class="section" id="reference">
  592.             <table class="selector-table">
  593.                 <thead>
  594.                     <tr><th>Селектор</th><th>Какво избира</th></tr>
  595.                 </thead>
  596.                 <tbody>
  597.                     <tr><td>p</td><td>Всички елементи &lt;p&gt;.</td></tr>
  598.                     <tr><td>.card</td><td>Всички елементи с клас card.</td></tr>
  599.                     <tr><td>#navigation</td><td>Елемента с id navigation.</td></tr>
  600.                     <tr><td>.card p</td><td>Всеки параграф потомък на елемент с клас card.</td></tr>
  601.                     <tr><td>.card &gt; p</td><td>Параграфите, които са преки деца на .card.</td></tr>
  602.                     <tr><td>.card + .card</td><td>Елемент с клас card, който следва непосредствено след друг .card.</td></tr>
  603.                     <tr><td>.card:hover</td><td>Карта, върху която е курсорът.</td></tr>
  604.                     <tr><td>input:focus</td><td>Поле за въвеждане, което в момента е на фокус.</td></tr>
  605.                     <tr><td>input[type="text"]</td><td>Поле input с атрибут type, чиято стойност е text.</td></tr>
  606.                     <tr><td>button:disabled</td><td>Бутон с атрибут disabled.</td></tr>
  607.                     <tr><td>:hover · :focus · :focus-visible · :active</td><td>Посочен, фокусиран, видимо фокусиран или натиснат елемент.</td></tr>
  608.                     <tr><td>:disabled · :checked</td><td>Изключен контрол или отметнато квадратче/радио бутон.</td></tr>
  609.                     <tr><td>:first-child · :last-child</td><td>Първия или последния наследник на родителя си.</td></tr>
  610.                     <tr><td>:nth-child(2n)</td><td>Всеки елемент на четна позиция; броенето започва от 1.</td></tr>
  611.                     <tr><td>:not(.muted)</td><td>Елемент, който не съвпада с посочения селектор.</td></tr>
  612.                 </tbody>
  613.             </table>
  614.         </section>
  615.     </main>
  616. </body>
  617. </html>
  618.  
Add Comment
Please, Sign In to add comment