:lang

指定された言語要素を全て選択します。

$(":lang(language)") 1.9追加

:langセレクタは、言語値が指定したコードと一致、または直後に"-"を持つ開始部分が指定されたコードと一致する要素を選択します。 例えば、$("div:lang(en)")は、<div lang="en"><div lang="en-us">(と、それらのDIV子孫要素)にマッチします。 ただし、<div lang="fr">にはマッチしません。

HTML要素のために、言語値はlang属性と、可能な限りのメタ要素の情報またはHTTPヘッダーの情報から 決定されます。

この使用方法に関する詳細については、 W3CのCSSの仕様 に記載されています。

デモ

各言語に沿ってDIV要素の色を変更しています。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body { background-color: #ccc; }
  6. h3 { margin: .25em 0; }
  7. div { line-height: 1.5em}
  8. /* アメリカ */
  9. .usa { background-color: #f00; color: #fff; }
  10. .usa .usa { background-color: #fff; color: #000; }
  11. .usa .usa .usa { background-color: #00f; color: #fff; }
  12. /* スペイン */
  13. .spain { background-color: #f00; color: #ff0; }
  14. .spain .spain { background-color: #ff0; color: #f00; line-height: 3em; }
  15. .spain .spain .spain { background-color: #f00; color: #ff0; line-height: 1.5em; }
  16. </style>
  17. <script src="http://code.jquery.com/jquery-latest.js"></script>
  18. </head>
  19. <body>
  20. <h3>アメリカ</h3>
  21. <div lang="en-us">red
  22. <div>white
  23. <div>and blue</div>
  24. </div>
  25. </div>
  26. <h3>スペイン</h3>
  27. <div lang="es-es">rojo(赤)
  28. <div>amarillo(黄色)
  29. <div>y rojo(赤)</div>
  30. </div>
  31. </div>
  32. <script>
  33. $( "div:lang(en-us)" ).addClass( "usa" );
  34. $( "div:lang(es-es)" ).addClass( "spain" );
  35. </script>
  36. </body>
  37. </html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM