James Oppenheim’s blog

It is possible to use multiple CSS classes on one HTML element. For example:

class="first second"

This is fantastic to produce reusable default styles that can be slightly overridden by the use of a second, third or fourth class. However, what becomes more interesting is that you can use both of the CSS classes in combination to create a more specific class.

For example, if the first class was ‘green’:


.first {
background-color: green;
}


and the ’second’ class was red:


.second {
background-color: red;
}


But when an element has both classes together ‘.first.second’ you get yellow.

.first.second {
background-color: yellow;
}

A point to note with the multiple classes is that the order is not important, for example: ‘.first.second’ is the same as ‘.second.first’.

However, there is a problem! In IE6, ‘.first.second’ works exactly the same way as ‘.second’. This is because IE6 doesn’t understand the chain of classes within a CSS selector, but instead only reads the last class in the chain.

Because of this we can’t safely use this technique if we want to support IE6. However, we can use it to create a IE6 CSS hack! To do this we add a random class that does not exist on the element before the real one and only IE6 will still match it. For example:


.ie6.third {
background-color: orange;
}


I have setup a demo page to demonstrate the multiple CSS classes & the IE6 CSS hack.

Technorati Tags: CSS, Examples, Web Standards, IE6, CSS hacks

I have run across this problem a few times lately and I thought I would write a post here as a way of remembering how to do it.

So you are doing some DOM Scripting and you want to find the first parent element that has a particular class. I have been using jQuery a lot lately and I initially thought this would be easy:

$('#test').parents('.parent-element');


However, as you notice with the example below you get all the parent elements with the specified class. So all we need to do now is filter out just the first element, like so:

$('#test').parents('.parent-element').filter(':first');


Done and done, see some example code to show it in action: Use jQuery to find the first parent element

I hope someone else finds this useful.

Technorati Tags: jQuery, JavaScript, Web, Example

Apple’s Safari web browser has for a while had the ability for users to drag the bottom right corner of a textarea and resize it to make room for more content.

While resizing textareas creates a nice unobtrusive enhancement, unfortunately it can sometimes break your CSS layout as well. So how can you turn it off? Well you actually have two easy options:

Option 1: Add min and max widths to your textarea so that Safari users can only resize it as far as you will let them.


textarea {
max-width: 300px;
max-height: 300px;
}


Option 2: If you do not want to let a Safari user resize the textarea at all, you can use the resize CSS property.

textarea{
resize: none;
}


Nice and easy - see my example of How to turn off Safari’s textarea expand.

Technorati Tags: CSS, Web Standards, Safari, Web browsers, Textarea resize