:enabled (有効な要素) CSSセレクタの詳細とデモ

有効な要素

有効な要素が選択されます。

ブラウザのサポート状況

Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Firefox Google Chorme Safari Opera
× × ×

:enabledセレクタ のブラウザ動作デモ

※対応していないブラウザでは、正しく選択されません。

「:enabled」値による動作デモ
デモでは、有効なラジオボタン・チェックボックスに点線のアウトラインが生成されることで確認できます。

兄弟要素1 <span class=class> </span>
子要素1-1 <span> </span>
孫要素1-1-1 <span> </span>
子要素1-2 <em> </em>
兄弟要素2 <span> </span>
子要素2-1 <span> </span>
兄弟要素3 <span id=id class=class> </span>
子要素3-1 <span> </span>
孫要素3-1-1 <input type=checkbox checked="checked"> </input>
孫要素3-1-2 <input type=checkbox> </input>
孫要素3-1-3 <input type=checkbox disabled="disabled"> </input>
孫要素3-1-4 <input type=radio checked="checked"> </input>
孫要素3-1-5 <input type=radio> </input>
孫要素3-1-6 <input type=radio disabled="disabled"> </input>
孫要素3-1-7 <input type=text> </input>
孫要素3-1-8 <input type=text disabled="disabled"> </input>
子要素3-2 <span> </span>
孫要素3-2-1 <em rel="hogedesu"> </em>
孫要素3-2-2 <em rel="myhoge"> </em>
孫要素3-2-3 <em rel="myhogedesu"> </em>
孫要素3-2-4 <em rel="hoge"> </em>
孫要素3-2-5 <em rel="piyopiyo"> </em>
孫要素3-2-6 <em rel="hoge piyo"> </em>
孫要素3-2-7 <em rel="hoge-piyo"> </em>
孫要素3-2-8 <em rel="piyo-hoge"> </em>
孫要素3-2-9 <em rel="foo-bar"> </em>
孫要素3-2-10 <em rel="hello"> </em>
子要素3-3 <span> </span>
孫要素3-3-1 <a href="#"> </a>
孫要素3-3-2 <a href="http://www.w3.org/"> </a>
孫要素3-3-3 <a href="http://shopping-nekodama.xii.jp/rakuten/search.php?c=200162&q=CSS"> </a>
孫要素3-3-4 <a href="#id"> </a>
兄弟要素4 <em> </em>
子要素4-1 <span> </span>
孫要素4-1-1 <b> </b>
孫要素4-1-2 <span class=class> </span>
ひ孫要素4-1-2-1 <i> </i>
孫要素4-1-3 <i> </i>
ひ孫要素4-1-3-1 <span lang="en"> </span>
ひ孫要素4-1-3-2 <span lang="ja"> </span>
ひ孫要素4-1-3-3 <span lang="en-us"> </span>
子要素4-2 <b> </b>
兄弟要素5 <span> </span>
兄弟要素6 <em> </em>
子要素6-1 <span> </span>

CSSサンプルコード

#result :enabled{
  background: #fe9;
  outline: dotted 2px #f93;
  outline-offset:1px;
  color: #933;
  font-weight: bold;
  font-size: 12px;
}