css - クラスを見つけるためのより短い方法はありますか

Question

この種の css セレクターを実現するためのより短い方法があるかどうか疑問に思っていました:

.post.quote, .post.photo, .post.video {
...
}

Answer 1

はい。ただし、CSS から直接ではありません: - たとえば、SASS ( http://sass-lang.com/ ) では次のことができます。

.user.post{
    margin-top:10px;
    .photo{}
    .video{}
}

なる

.user.post{margin-top:10px;}
.user.post .photo{}
.user.post .video{}

または、js しか使用できない場合は、LESS ( http://lesscss.org/ ) があります。

.bordered {
      border-top: dotted 1px black;
      border-bottom: solid 2px black;
      color:blue;
      font-weight:bold;
      margin-left:20px;
    }

.post, .video {
  .child, .sibling {
      .parent & { color: black; }
      & & { .bordered; }
  }
}

になる

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color: blue;
  font-weight: bold;
  margin-left: 20px;
}
.parent .post .child,
.parent .video .child,
.parent .post .sibling,
.parent .video .sibling {
  color: black;
}
.post .child .post .child,
.post .child .video .child,
.post .child .post .sibling,
.post .child .video .sibling,
.video .child .post .child,
.video .child .video .child,
.video .child .post .sibling,
.video .child .video .sibling,
.post .sibling .post .child,
.post .sibling .video .child,
.post .sibling .post .sibling,
.post .sibling .video .sibling,
.video .sibling .post .child,
.video .sibling .video .child,
.video .sibling .post .sibling,
.video .sibling .video .sibling {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
  color: blue;
  font-weight: bold;
  margin-left: 20px;
}

Answer 2

クラスphoto、video、およびquoteが の下にしか表示されpostない場合は、スタイルを再配置して、より具体的にすることを検討できますpost。それからちょうど：

.photo, .video, .quote { /*...*/ }

同じ効果があるはずです。