:only-child

概要

CSS の :only-child 擬似クラス は、親要素の唯一の子要素である要素を表します。これは :first-child:last-child:nth-child(1):nth-last-child(1) と同じですが、詳細度はそれらより低くなります。

構文

parent child:only-child {
  property: value;
} 

基本的な例

span:only-child {
  color: red;
}
<div>
    <span>この span は親の唯一の子です</span>
</div>

<div>
    <span>この span は親の二人いる子のうちの一人です</span>
    <span>この span は親の二人いる子のうちの一人です</span>
</div> 

表示例

この span は親の唯一の子です
この span は親の二人いる子のうちの一人です この span は親の二人いる子のうちの一人です

リスト項目の例

li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
<ol>
    <li>その 1
        <ul>
            <li>このリストには 1 つの要素だけがあります
        </ul>
    </li>
    <li>その 2
        <ul>
            <li>このリストには 2 つの要素があります
            <li>このリストには 2 つの要素があります
        </ul>
    </li>
    <li>その 3
        <ul>
            <li>このリストには 3 つの要素があります
            <li>このリストには 3 つの要素があります
            <li>このリストには 3 つの要素があります
        </ul>
    </li>
<ol>
  1. その 1
    • このリストには 1 つの要素だけがあります
  2. その 2
    • このリストには 2 つの要素があります
    • このリストには 2 つの要素があります
  3. その 3
    • このリストには 3 つの要素があります
    • このリストには 3 つの要素があります
    • このリストには 3 つの要素があります

p:only-child {
  background: #6699ff;
  width: 350px;
}
<div>
    <p>これは :only-child の段落です</p>
</div>

これは :only-child の段落です

仕様

仕様書 策定状況 コメント
Selectors Level 4 草案 変更なし
Selectors Level 3 勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 2 1.5 (1.8) 9 9.5 3.1
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 2.1 1.0 (1.8) 9 10.0 3.1

Document Tags and Contributors

Contributors to this page: sosleepy, ethertank
最終更新者: ethertank,
サイドバーを隠す