DIVをいい感じに罫線を入れる + の使い方

https://qiita.com/kijitora-neko/items/4a79719af56da17c3cc8

上記を参照

+ は「次の要素」という意味らしい

実際にやったコード

.gazoulist {
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
	width: 1180px;margin: auto;
	border: 1px solid #000000;
}

.item{
    background-color: #67A0B8;
    width: 294px;
    height: 300px;
}

.item + .item{border-left: 1px solid #000;}

.gazoulist::after {
display: block;
content:””;
width: 30%;
}

@media screen and (max-width: 1024px) {
	
	.item{
    background-color: #67A0B8;
    width: 50%;
    height: 300px;
}
	.gazoulist {
  display: flex;
  flex-wrap: wrap;
    justify-content: space-between;
	width: 100%;margin: auto;
}
}
	
<div class="gazoulist">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>

</div>
カテゴリー: CSS