<div class="layout">
      <span id="id-red-samp">赤</span>
      <span id="id-blue-samp">青</span>
      <span id="green-hoge-yellow">緑と黄</span>
      <span id="green-fuga-yellow">緑と黄</span>
    </div>
    <div class="layout">
      <span class="class-red-samp">赤</span>
      <span class="class-blue-samp">青</span>
      <span class="green-hoge-yellow">緑と黄</span>
      <span class="green-fuga-yellow">緑と黄</span>
    </div>

.layout span{
  padding:8px 16px;
  margin:16px;
  display: inline-block;
}

/* 前方一致 */
[id^="id"] {
  font-size: 20px;
}
[class^="class"] {
  font-weight: bold;
}

/* 後方一致 */
[id$="samp"] {
  border-radius: 4px;
}
[class$="samp"] {
  border-radius: 50px;
}

/* 部分一致 */
[id*="red"] {
  color: red;
}
[class*="red"] {
  color: red;
}

/* and条件 */
[id*="green"][id*="yellow"]{
  color: green;
  background: yellow;
}
[class*="green"][class*="yellow"]{
  color: green;
  background: yellow;
}

/* or条件 */
[class*="blue"],[id*="blue"]{
  color: blue;
}