CSS Selectors | Class and ID Selectors

css_class_and_id_selector

CSS Class Selector

Class selector using (.) dot notation can be used to select elements that have a class attribute containing a specific value or values.The name of the class value must immediately follow the dot (.)

*.design { color: gray } OR .desig { color: gray }
  /* to set a color for all elements with "design" class */

p.design { color: gray }
  /* to set a color for "p" elements with "design" class */
<p class="design">Web Design</p>
p.design.develop { color: gray }
/* to set a color for "p" elements with "design" 
and white separated with develop class */
<p class="design develop">Web Designing & Development</p>

CSS ID Selector

ID selector using “hash notation” can be used to select elements that have an ID containing a specific value or values. The name of the ID value must immediately follow the octothorpe (#).  An ID typed attribute can be used to uniquely identify its element. There is no two such attributes can have the same value in a conforming document.

*#testing { color: red } OR #testing { color: red }
  /* to set a color for all elements with "testing" id */

p#testing { color: red }
  /* to set a color for "p" elements with "testing" id */
<p id="testing">Web Testing</p>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s