Controls whether users can select text or images inside an element.
user-select は、UI部品や本文などで「テキストを範囲選択できる／できない」を切り替えるためのCSSです。
auto が「継承しないのに親の影響を受ける」理由を説明できるpointer-events）と選択可否（user-select）を混同せずに使い分けられるuser-select は、要素の中身（主にテキストや画像）をユーザーが範囲選択できるかどうかを切り替える設定です。
よくある用途は「UI部品では選択させない」「コピーしてほしい文字列は選択しやすくする」の2つです。
見た目やレイアウト（幅・高さ・配置）は変わりません。クリックやタップの可否も変わりません。
まずは none（選択不可）と all（一発全選択）を体感します。
このテキストは普通に選択できます。
このテキストは選択できない設定になっています。
一度のクリックで、このテキスト全体を選択できます。
HTML
<p>このテキストは普通に選択できます。</p>
<p class="unselectable">このテキストは選択できない設定になっています。</p>
<p class="all">一度のクリックで、このテキスト全体を選択できます。</p>CSS
.unselectable {
user-select: none;
}
.all {
user-select: all;
}実務では外部CSS（共通CSSやページCSS）に書くのが基本で、インラインやJavaScriptでの指定は例外として扱います。
CSS
/* UIの誤選択を防ぐ */
.button-like {
user-select: none;
}
/* コピーさせたい文字列を一発で全選択 */
.copy-token {
user-select: all;
}user-select は、ユーザー操作（ドラッグ、ダブルクリック、長押しなど）による「選択」のしやすさを制御します。
対象はすべての要素です。レイアウトや描画（表示/非表示）を変えるプロパティではありません。
user-select: none は“操作を抑制する”だけで、DevToolsやJavaScript、画面キャプチャなどによる取得まで防ぐものではありません。情報保護の仕組みではありません。
autoauto の計算値は親要素の値に影響される。nonetextallautocontain は仕様上は存在しますが、主要ブラウザでほとんど実装されていないため実務で使える場面はほぼありません（試験では“存在する値”として知識整理だけしておくと安全です）。
user-select は継承しません。ただし auto の使用値は親の計算値を参照して決まるため、結果として“継承しているように見える”ことがあります。
HTML
<div class="parent">
<p>親は選択不可（none）</p>
<p class="child">子は指定なし（auto）でも、親の影響で選択不可になります</p>
<p class="child text-select">この子だけ text に戻すと選択できます</p>
</div>CSS
.parent {
user-select: none;
}
.child {
/* 指定なし（auto） */
}
.text-select {
user-select: text;
}親は選択不可（none）
子は指定なし（auto）でも、親の影響で選択不可になります
この子だけ text に戻すと選択できます
結論としては「だいたい text だが、親が none/all なら引っ張られる」と覚えると実務で迷いにくいです。
::before と ::after の疑似要素では、計算値は none になります。input / textarea / contenteditable="true"）では、ユーザーが編集・選択できる状態になります。all の場合、対象要素も all になります。none の場合、対象要素も none になります。text になります。user-select は途中の中間値がないため、値を変えると“段階的に”ではなく“切り替え”になります。
user-selectpointer-eventsdisplay / visibilityuser-select は表示を変えません。-webkit-touch-calloutuser-select と併用されることがあります。cursorCSS
.button-like {
user-select: none;
}タブ切り替えやカードUIなどで、ダブルクリックやドラッグ時に文字が選択状態になるのを防げます。
ABCD-1234-EFGH
CSS
.all {
user-select: all;
}CSS
.ui-area {
user-select: none;
}
/* 入力欄や編集可能要素は選択できる状態に戻す */
.ui-area input,
.ui-area textarea,
.ui-area [contenteditable="true"] {
user-select: text;
}UI領域をまとめて none にしつつ、入力や編集は巻き込まないのが安全です。
親（または文章全体）を none にしてから、選択したい部分だけ text で上書きします。
このテキストは「一部」だけ、範囲選択ができます。
HTML
<p class="unselectable">このテキストは「<span class="text-select">一部</span>」だけ、範囲選択ができます。</p>CSS
.unselectable {
user-select: none;
}
.text-select {
user-select: text;
}user-select の宣言元（どのCSSが効いているか）を見るuser-select の最終値（勝った値）を確認するuser-select が none/all になっていないかも合わせて見る（auto の影響）input / textarea / [contenteditable] まで巻き込んでいる可能性があります。適用範囲を絞るか、対象だけ text に戻します。none を当てた上で、選択したい要素に text を明示して上書きします。user-select ではなく pointer-events を検討します（ただしキーボード操作やアクセシビリティにも影響が出やすいので用途限定）。同じ要素に複数の user-select が当たる場合、基本は「詳細度 → 後勝ち」の順で勝ち負けが決まります。UI全体に .ui-area * のような広域指定をすると、意図せずフォームまで巻き込みやすいので注意します。
スマートフォンでは長押しによる選択やコンテキストメニューの表示に影響します。特にiOS Safari系では -webkit-touch-callout と併用されることがあります。
CSS
.sample {
user-select: none;
-webkit-touch-callout: none;
}user-select: none を付けない（UXを下げやすい）user-select: all の方がUXが上がるuser-select はテキスト選択の話であり、スクリーンリーダーの読み上げ可否とは別です（“選択できない＝読めない”ではない）pointer-eventsuser-select を検討します。-webkit-touch-callout[contenteditable="true"]auto の挙動にも関係します。::before / ::afterauto の計算で none になる例外を持ちます。user-select 自体は継承しません。user-select の初期値は auto です。auto は条件で使用値が変わります。user-select: none でクリックも無効になる → ×（クリックは別。必要なら pointer-events）user-select は継承する → ×（継承しない。ただし auto は親の影響を受ける）auto は常に text と同じ → ×（親が none/all なら引っ張られる など条件あり）.ui-area { user-select: none; } の中にある input まで選択できなくなった。最短の修正は？.ui-area input { user-select: text; } のように、入力系だけ text で上書きします。user-select: none がある。子の user-select は継承している？auto のままだと、使用値決定のルールで親の影響を受けます。user-select: none を付けた。これで情報保護になる？user-select が効かないのはなぜ？user-select の最終値を確認し、上書き（詳細度/後勝ち）や親の none/all を疑います。user-select: none にして、選択したい要素だけ user-select: text で上書きします。user-select に加えて、iOS Safari系では -webkit-touch-callout の影響を受けることがあります。user-select ではなく pointer-events を検討します。ただし操作性やアクセシビリティへの影響が大きいので用途限定です。none／JSでインライン指定／広域セレクタで巻き込み。確認：Computedの最終値。解決：必要箇所だけ text へ上書き。input/textarea を巻き込んだ。確認：対象要素のComputed。解決：フォームだけ text に戻す。-webkit-touch-callout。確認：iOS Safariで再現。解決：必要なら併用。user-select: noneuser-select: allinput/textarea/[contenteditable]）→ 巻き込まない、必要なら text に戻すauto）と上書きを確認