CSS - Multiple Classes for a single HTML element

(0 votes, average 0 out of 5)

An often overlooked and under documented feature of CSS is the ability to nest multiple classes for a given element either augmenting or overriding styles.  This can be useful if certain special effects are desired such as applying highlighting and bolding an input's text without having to specify all of the other attributes as well. 

CSS:

.highlightAndBold{
   background-color:yellow;
   font-weight:bold;
}
 
.textBoxes{
   padding:4px;border:1px solid #d4d4d4;
}

HTML:

<input class="textBoxes highlightAndBold" type="text" >

You can specify multiple classes for an element by simple putting a single space between each CSS style entry.  In this case the element will have all of the styling specified by each of CSS tag as if all the attribute properties were specified together as one.  In the case where CSS attributes conflict, the CSS tag that comes after the other in the style sheet will take priority.

CSS:

.blue{
   background-color:blue;
}
 
.red{
   background-color:red;
}

HTML:

<div class="red blue">A simple element</div>

 

The elements background color will be overridden by the red CSS style since it comes later in the CSS style sheet.  Changing the position of 'red' and 'blue' within the class specifier won't change the outcome.

 


 

 


Partner Links:
Last Updated on Sunday, 11 July 2010 17:21  
Related Articles

» How to connect an Apple Bluetooth Keyboard to Ubuntu (Troubleshooting)

Note: This guide uses programs specific to Ubuntu 10.04 (Lucid Lynx) and newer. For older versions of Ubuntu, please refer to .Sometimes the Ubuntu bluetooth stack can behave erratically and prevent you from connecting your Apple Bluetooth Keyboard (or other bluetooth device). The normal procedure for connecting your bluetooth keyboard involves the following steps:First, make sure the bluetooth applet is running by looking for the bluetooth icon on your panel:If it is not running, press ALT+F2,...

» Redirect all output in shell script to a file

Redirecting a single command in a script to a file is straight-forward using the > syntax. For example, to redirect all STDERR output:1echo "hello, world" 2>> /tmp/filename.logTo redirect all lines of a Bash script to a file, add a scope around all of the lines and then redirect the scope to a file. For example:123456(echo "this is line 1 of my script"cat /proc/cpuinfodmesgecho "this is the end of my script") 2>> /tmp/filename.logThis allows you to capture all output of a script...

» Redirect all traffic to FQDN (Fully Qualified Domain Name) using Apache

If you would like to redirect all traffic to an apache web server to the server's FQDN, e.g. redirecting http://myserver/ to http://myserver.example.com, you can easily achieve this using a two VirtualHost entries in your Apache config file. On Ubuntu, the file to edit is /etc/apache2/sites-enabled/000-default. Find your original <VirtualHost> declaration, and add a ServerName field with the server's FQDN (fully qualified domain name):12345<VirtualHost *:80> ServerAdmin...