Tag: selectors

Language Specific CSS Selectors

The site that I am working on is bilingual, specifically in english and in spanish. This presents complications for any site of course, so this is a good trick to have in your arsenal. This is especially good for Drupal but will work on any site.

media=”screen”

:lang(es) #menu-4184-1

{
position:relative;
width: 122px;
}
This will allow the particular selector to be used only when the language is set to spanish. Please note that many other languages can be used by this by replacing the two letter language code with the one that you need. EI – de for german.

Advanced CSS Selectors for Drupal – Page class tied to low level IDs

Customizing Drupal content placement can be tricky. If you have a piece of content

Image

that appears in more than one area, you may need flexibility in your CSS to style the elements independently of one another.

What has worked well for me is CSS selectors that utilize the cascading nature of CSS for advanced

In the SS, you can see that the selector combined a class and an ID. The ID is for the individual node, in this case an amazon book ad generated externally, and the class is for the page itself. It’s important to note that the selector will work as long as the two selectors are in the same hierarchy. I could just use the ID but that is assigned to the individual node and that node appears (may or may not, hard to tell with Drupal) in other areas. Style by the ID, fix one, break the other. But, using the class of the page and the ID of the node allows an easy to find hierarchy that will cascade every time for that page and will only hit that element on that page. So unless you have the same node twice on the same page, this will always allow consistent styling  selection.

CSS Rendering Engines

IE10 does a much better job than earlier versions at compatibility with modern CSS selectors. But I believe there are still some cases where browser specific selectors may be needed.

  • IE (pre 10, i believe)
    • Engine: Trident
    • CSS-prefix: -msie
  • Firefox
    • Engine: Gecko
    • CSS-prefix: -moz
  • Opera
    • Engine: Presto
    • CSS-prefix: -o
  • Safari & Chrome
    • Engine: WebKit
    • CSS-prefix: -webkit