Tutorials Point

  CSS Home

  CSS Reference
  Pseudo Classes & Elements

Copyright © 2014 by tutorialspoint

  Home     References     Discussion Forums     About TP  

CSS Pseudo-class :lang

previous next AddThis Social Bookmark Button



The :lang pseudo-class is used to specify a language to use in a specified element.

This class is useful in documents that must appeal to multiple languages that have different conventions for certain language constructs. For example, the French language typically uses angle brackets (< and >) for quoting purposes, while the English language uses quote marks (' and ').

While defining pseudo-classes in a <style>...</style> block, following points should be taken care:

  • Pseudo-class names are not case-sensitive.

  • Pseudo-class are different from CSS classes but they can be combined.


In a document that needs to address this difference, you can use the :lang pseudo-class to change the quote marks appropriately. The following code changes the <blockquote> tag appropriately for the language being used:

<style type="text/css">
/* Two levels of quotes for two languages*/
:lang(en) { quotes: '"' '"'  "'"  "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
<p>...<q lang="fr">A quote in a paragraph</q>...</p>

The :lang selectors will apply to all elements in the document. However, not all elements make use of the quotes property, so the effect will be transparent for most elements.

...A quote in a paragraph...

To Become more comfortable - Do Online Practice

previous next Printer Friendly