Css div скрыть: Методы скрытия элементов веб-страниц / Хабр

Leave a Comment / Css / By /

css — Скрыть содержимое div с помощью сss

В CSS можно танцевать только за счет чекбоксов и радио-кнопок. Есть селектор .elem:checked, позволяющий находить отмеченные чекбоксы. А еще есть HTML-тег <label>, который умеет при клике переключать эти чекбоксы (и может имитировать кнопку).

Плюс, CSS-селектор .bubu ~ .kuku находит все элементы с классом .kuku, которые находятся где-то ниже в коде от .bubu, при этом они оба должны быть одинакового «уровня» — т.е. не обернуты в дополнительные теги.

Поэтому пример: При клике на label, невидимый чекбокс отмечается,
а к его отметке привязан стиль для .bubu #hide:checked ~ .bubu {display: none;}
( i ) через . тыкают на класс, а через # — id.

.btn {
  display: block;
  width: 150px; padding: 2px;
  font-size: 20px; text-align: center;
  border: 2px solid orange;
  cursor: pointer; user-select: none;
}

#hide {display: none;}
#hide:checked ~ .
 
 bubu {display: none;}

.bubu {margin: 10px;}
<label for="hide">Кнопка</label>

<input type="checkbox">
<div>Какое-то содержание...</div>
<div>Другое содержание...</div>

Но такой код при повторном клике — опять покажет текст. Если нужно его убрать навсегда, можно использовать одну радио-кнопку:

.btn {
  display: inline-block;
  width: 150px; padding: 2px;
  font-size: 20px; text-align: center;
  border: 2px solid orange;
  cursor: pointer; user-select: none;
}

/* #hide-1, #hide-2 {display: none;} */

#hide-1:checked ~ .bubu {display: none;}
#hide-2:checked ~ .bubu {display: none;}

.bubu {margin: 10px;}
<label for="hide-1">Кнопка-1</label>
<label for="hide-2">Кнопка-2</label>

<div>
  <input type="radio" name="hide-1">
  <div>Какое-то содержание...1111</div>
  <div>Другое содержание.
  ..1111</div>
</div>

<div>
  <input type="radio" name="hide-2">
  <div>Какое-то содержание...2222</div>
  <div>Другое содержание...2222</div>
</div>

Невидимость радио убрал, чтобы было видно, что происходит. В этом случае завернул их в дополнительные блоки, чтобы #hide1 ~ .bubu не цеплял блоки, предназначенные для hide-2

За счет ~ разметка может быть чуть более свободной.
Если блок с «содержимым» точно один, и точно потом не забудете, почему там стоит этот чекбокс, можно использовать селектор .bubu + .kuku, который выделяет .kuku, находящийся непосредственно после .bubu, и между ними больше ничего не должно стоять:

#hide {display: none;}
#hide:checked + .bubu {display: none;}

.bubu {margin: 10px;}

.btn {
  display: block;
  width: 150px; padding: 2px;
  font-size: 20px; text-align: center;
  border: 2px solid orange;
  cursor: pointer; user-select: none;
}
<label for="hide">Кнопка</label>

<input type="checkbox">
<div>Какое-то содержание. ..</div>

<div>А это уже не скроется...</div>

Свойство отображения · Bootstrap v5.1

Как это устроено

Измените значение свойства display property с помощью наших вспомогательных классов адаптивного отображения. Мы намеренно поддерживаем только подмножество всех возможных значений для display. Классы можно комбинировать для получения различных эффектов по мере необходимости.

Обозначение

Утилиты отображения классов, которые применяются ко всем контрольным точкам, от xs до xxl, не имеют в себе аббревиатуры контрольной точки. Это потому, что эти классы применяются начиная с min-width: 0; и выше, и поэтому не связаны медиа-запросами. Остальные контрольные точки, однако, содержат аббревиатуру контрольной точки.

Таким образом, классы именуются в следующем формате:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg, xl и xxl.

Где значение — одно из:

  • none
  • inline
  • inline-block
  • block
  • grid
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Отображаемые значения можно изменить, изменив переменную $displays и перекомпилировав SCSS.

Медиа-запросы влияют на ширину экрана с заданной контрольной точкой или больше. Например, .d-lg-none устанавливает display: none;

на экранах lg, xl и xxl.

Примеры

d-inline

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для более быстрой разработки, удобной для мобильных устройств, используйте адаптивные классы отображения для отображения и скрытия элементов по устройствам. Избегайте создания совершенно разных версий одного и того же сайта, вместо этого скройте элементы в зависимости от размера экрана.

Чтобы скрыть элементы, просто используйте класс .d-none или один из классов .d-{sm,md,lg,xl,xxl}-none для любого варианта адаптивного экрана.

Чтобы отображать элемент только в заданном интервале размеров экрана, Вы можете объединить один класс

.d-*-none с классом .d-*-*, например, .d-none .d-md-block .d-xl-none .d-xxl-none скроет элемент для всех размеров экрана, кроме средних и больших устройств.

Размер экранаКласс
Скрыто на всех.d-none
Скрыто только на xs.d-none .d-sm-block
Скрыто только на sm.d-sm-none .d-md-block
Скрыто только на md. d-md-none .d-lg-block
Скрыто только на lg.d-lg-none .d-xl-block
Скрыто только на xl.d-xl-none .d-xxl-block
Скрыто только на xxl
.d-xxl-none
Видно на всех.d-block
Видно только на xs.d-block .d-sm-none
Видно только на sm.d-none .d-sm-block .d-md-none
Видно только на md.d-none .d-md-block .d-lg-none
Видно только на lg.d-none .d-lg-block .d-xl-none
Видно только на xl.d-none .d-xl-block .d-xxl-none
Видно только на xxl.d-none .d-xxl-block

скрыть на lg и более широких экранах

скрыть на экранах меньше lg

<div>скрыть на lg и более широких экранах</div>
<div>скрыть на экранах меньше lg</div>

Показать в печати

Измените значение display элементов при печати с помощью наших служебных классов отображения при печати.

Включает поддержку тех же значений display, что и наши адаптивные утилиты .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно комбинировать.

Только экран (Скрывать только при печати)

Только печать (скрыть только на экране)

Скрыть до большого размера на экране, но всегда показывать на печати

<div>Только экран (Скрывать только при печати)</div>
<div>Только печать (скрыть только на экране)</div>
<div>Скрыть до большого размера на экране, но всегда показывать на печати</div>

Sass

API утилит

Утилиты отображения объявлены в нашем API утилит в scss/_utilities. scss. Узнайте, как использовать API утилит.

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),

Скрыть элемент div внутри div с помощью css

спросил

Изменено 2 года, 8 месяцев назад

Просмотрено 621 раз

Я хочу скрыть дочерний элемент div с помощью css.

 <дел>
              <дел>
                <дел>
                  <дел>
                    
<метка
                        для = "fe1729">навыки

                    <дел>
                      <дел>
                        <дел>
                          <дел>
                            
<тип ввода="флажок"
                               
                                value="Используется Java для школьных проектов" name="checkboxes">

                        
<тип ввода="флажок"
                           
                            value="0-1 лет профессионального опыта" name="checkboxes">
 


                        
<тип ввода="флажок"
                           
                            value="1-3 года профессионального опыта" name="checkboxes">

                        
<тип ввода="флажок"
                           
                            value="4+ года профессионального опыта" name="checkboxes">

                        
<тип ввода="флажок"
                            value="Нет недавнего опыта"
                            имя="флажки"><метка
                            for="checkbox-Нет недавнего опыта_txh6181p">Нет недавнего опыта