jQuery API の jQuery( ':only-child' ) は、親要素の唯一の子要素であるすべての要素を選択する。
記述方法
jQuery( '親要素 子要素:only-child' )
「子要素」に指定した要素が、「親要素」に指定した要素の唯一の子要素であれば、その子要素を選択。
実装例（サンプル）
| セル子要素子要素 | セル子要素 | セル |
| セル子要素 | セル子要素子要素 | セル子要素 |
| セル | セル子要素 | セル子要素子要素 |
実装例（サンプル）の動作について
「toggle」ボタンをクリックすると、セル内に子要素が一つだけ存在する場合、その子要素の背景色が、ピンク色に変わる。
「toggle」ボタンを再度クリックすると、セル内に子要素が一つだけ存在する場合、その子要素の背景色が、黄色に戻る。
実装例（サンプル）のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-only-child td span:only-child' ) . css( {
backgroundColor: 'pink',
} );
},
function () {
jQuery( '#jquery-api-only-child td span:only-child' ) . css( {
backgroundColor: 'yellow',
} );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-toggle' ) . toggle(
function () {
jQuery( '#jquery-api-only-child td span:only-child' ) . css( {
backgroundColor: 'pink',
} );
},
function () {
jQuery( '#jquery-api-only-child td span:only-child' ) . css( {
backgroundColor: 'yellow',
} );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-only-child td {
background-color: yellow;
}
#jquery-api-only-child td span {
margin-left: 1em;
font-size: 10px;
}
-->
</style>
<!--
#jquery-api-only-child td {
background-color: yellow;
}
#jquery-api-only-child td span {
margin-left: 1em;
font-size: 10px;
}
-->
</style>
HTML
<button id="jquery-api-toggle">toggle</button>
<table id="jquery-api-only-child">
<tr>
<td>セル<span>子要素</span><span>子要素</span></td>
<td>セル<span>子要素</span></td>
<td>セル</td>
</tr>
<tr>
<td>セル<span>子要素</span></td>
<td>セル<span>子要素</span><span>子要素</span></td>
<td>セル<span>子要素</span></td>
</tr>
<tr>
<td>セル</td>
<td>セル<span>子要素</span></td>
<td>セル<span>子要素</span><span>子要素</span></td>
</tr>
</table>
<table id="jquery-api-only-child">
<tr>
<td>セル<span>子要素</span><span>子要素</span></td>
<td>セル<span>子要素</span></td>
<td>セル</td>
</tr>
<tr>
<td>セル<span>子要素</span></td>
<td>セル<span>子要素</span><span>子要素</span></td>
<td>セル<span>子要素</span></td>
</tr>
<tr>
<td>セル</td>
<td>セル<span>子要素</span></td>
<td>セル<span>子要素</span><span>子要素</span></td>
</tr>
</table>