Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Помогите сократить код (https://javascript.ru/forum/misc/81653-pomogite-sokratit-kod.html)

Сергей Ракипов 19.01.2021 09:04

Цитата:

Сообщение от рони (Сообщение 532913)
потому что селекторы css обратно не видят, нужен квадрат а затем надпись, чтоб квадрат мог влиять на заголовок.

но заголовок можно визуально разместить впереди, один из таких способов показал voraa,

Я понял уже.
Я написал, потом нагуглил ответ, изменил сообщение, но вы уже ответили на мое первое.

voraa 19.01.2021 10:01

Цитата:

Сообщение от рони
voraa,
а без flex-direction: row-reverse; сможешь?

Из меня верстальщик и знаток CSS, как из коровы балерина.
Но если подумать, внимательно посмотреть, что нам дает flex, то пожалуй смогу.

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
 
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 600px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
            /*flex-direction: row-reverse;*/
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
       .blok .kvadrat:hover~h1{
           color:#0504aa;
       }
      h1 {
        order:-1;
      }
    </style>
</head>
 
<body>
<div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv">1</button>
        <button class="kvadrat">2</button>
        <button class="kvadrat">3</button>
        <h1 class="zagolovok">Заголовок</h1>
    </div>
</body>
</html>

рони 19.01.2021 10:23

voraa,
:dance: замечательно!

Сергей Ракипов 19.01.2021 10:48

voraa,
:write:


Часовой пояс GMT +3, время: 07:52.