# CSS: mashing elements to class or ID

**URL:** https://forum.kirupa.com/t/css-mashing-elements-to-class-or-id/248244
**Category:** web dev
**Created:** [January 5, 2008, 7:11pm UTC](https://forum.kirupa.com/t/css-mashing-elements-to-class-or-id/248244 "2008-01-05T19:11:59Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![SeaFoam](https://avatars.discourse-cdn.com/v4/letter/s/e480ec/32.png) [@SeaFoam](https://forum.kirupa.com/u/SeaFoam)
#### Post date: [January 5, 2008, 7:11pm UTC](https://forum.kirupa.com/t/css-mashing-elements-to-class-or-id/248244/1 "2008-01-05T19:11:59Z")

</div>

Normally I would do something like this in my styles.css page…

.whatever {color:blue;} /\*class declaration \*/  
or  
#whoever {color:red;} /\*ID declaration \*/

and eventually use

\<p class=“whatever”\>lorem ipsum\</p\>  
or  
\<p id=“whoever”\>lorem ipsum\</p\>

However, there are times when I see the element and the class mashed together like on this page: [http://css.maxdesign.com.au/selectutorial/selectors\_class.htm](http://css.maxdesign.com.au/selectutorial/selectors_class.htm) which uses:  
**div.big** { color: blue; }  
**td.big** { color: yellow; }

What is that called, when the element and class are put togther? Why?  
Why would I use " p.whatever {color:blue;} " with the “p” element in front? (instead of just the .class as above)

Like wise, this page: [http://css.maxdesign.com.au/selectutorial/selectors\_id.htm](http://css.maxdesign.com.au/selectutorial/selectors_id.htm) has:  
**#navigation** { width: 12em; color: #333; }  
**div#navigation** { width: 12em; color: #333; }

Also, what is THAT called with the element and ID mashed together? Also why? Also why would i use " p#whoever {color:red;} " instead of just the #whoever? Thanks.