css

対象の要素と、その子要素のテキストを選択不可にします。

構文
1. 例
参考

構文

  user-select: none;

例

部分的に選択できなくしたサンプルです。

選択できます。

選択できません。

HTML

<div class="BB-container">
      <div class="BB-card">
        <div class="BB-text-A">
          選択できます。
        </div>
      </div>
      <div class="BB-card">
        <div class="BB-text-B">
          選択できません。
        </div>
      </div>
    </div>

“text-B”に適用しています。

.BB-container
{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 40px 0;
}
.BB-container .BB-card
{
  position: relative;
  min-width: 320px;
  height: 140px;
  box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.2),
              inset -5px -5px 15px rgba(255, 255, 255, 0.9),
                    5px 5px 15px rgba(0, 0, 0, 0.3),
                    -5px -5px 15px rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  margin: 30px;
}
.BB-text-A,
.BB-text-B
{
  display: flex;
  justify-content: center;
  text-align: center;
  padding-top: 50px;
  font-weight: 600;
  font-size: 2em;
  color: rgb(42, 42, 42);
}
.BB-text-B
{
  user-select: none;
}