Обернуть содержимое в div с помощью селекторов

Question

Не знаю, как это лучше сформулировать.Могу ли я использовать селекторы CSS, чтобы добавить дополнительную оболочку <div> вокруг содержимого цели <div>?

Итак, допустим, моя страница выглядит следующим образом:

<div>
  <h3>Something</h3>
  <img src='/../../img/logo.jpg' />
</div>

Я хочу изменитьэто через css to:

<div>
  <div id='newlyAddedDiv' class='something'>
    <h3>Something</h3>
    <img src='/../../img/logo.jpg' />
  </div>
</div>

Возможно ли это через селекторы css или псевдо-селекторы?Я посмотрел на before, after, first-child и т. Д., Но, похоже, они не справляются с задачей.

Редактировать

Вот проблема.Я работаю с сеткой (что-то вроде фотогалереи) и хочу добавить поле вокруг каждого элемента.Это Bootstrap 4 BTW.

<div id='Gallery'>
  <div class='col-3'>
    <h3>
    <img>
    <p>
  </div>
  ...
</div>

Это создает сетку из 4 столбцов.Добавление поля на родительском div (col-3) влияет на саму сетку (я понимаю, почему это происходит).Я также не могу добавить поля / отступы к элементам контента (потому что их несколько).Поэтому я подумал, что было бы легко, если бы я мог вставить «обертку» div вокруг содержимого и добавить к нему поле.К сожалению, сейчас это тоже не представляется возможным.

Answer 1

Вы не можете сделать это с CSS, но вы можете сделать это с JavaScript

Пример

// find elements
var banner = $("#banner-message > img")
var button = $("button")

// handle click and add class
button.on("click", function(){
  $(banner).wrap('<div class="new-parent"></div>');
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <img src="https://i.imgur.com/CtZQRga.jpg" width="100" height="100" />
  <button>Change color</button>
</div>

Answer 2

Вы хотите преобразовать это:

<div id='Gallery'>
  <div class='col-3'>
    <h3>
    <img>
    <p>
  </div>
  ...
</div>

В это:

<div id='Gallery'>
  <div class='col-3'>
    <div class="new">
      <h3>
      <img>
      <p>
    </div>
  </div>
  ...
</div>

Чтобы иметь возможность добавить маржу к .new.В этом случае вы можете просто добавить поле к содержимому внутри, как показано ниже:

.col-3 > * {
   margin:0 10px 0; /*no magin-top/bottom*/
}

.col-3 > :first-child {
   margin:10px 10px 0; /*no margin-bottom*/
}
.col-3 > :last-child {
   margin:0 10px 10px; /*no margin-top*/
}

Пример кода:

img {
  width:80px;
}
.col-3 {
  outline:1px solid red;
}
.col-3 > * {
   margin:0 10px 0; /*no magin-top/bottom*/
}

.col-3 > :first-child {
   margin:10px 10px 0; /*no margin-bottom*/
}
.col-3 > :last-child {
   margin:0 10px 10px; /*no margin-top*/
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" >
<div id='Gallery' class="container">
  <div class="row">
    <div class='col-3'>
      <h3>Title</h3>
      <img src="https://picsum.photos/200/300?image=0">
    </div>
    <div class='col-3'>
      <h3>Title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p>lorem</p>
    </div>
    <div class='col-3'>
      <h3> title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
    <div class='col-3'>
      <h3>title</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
    <div class='col-3'>
      <h3>title<br>long</h3>
      <img src="https://picsum.photos/200/300?image=0">
      <p></p>
    </div>
  </div>
</div>

Answer 3

CSS только меняет стиль страницы. не может изменить DOM (объектную модель документа).Для этого вы можете использовать JS или некоторый код на стороне сервера.