CSS Syntax and Selectors

CSS Syntax and Selectors Tutorial

A CSS rule-set consists of a selector and a declaration block:

  • Selector − A selector is an HTML tag at which a style will be applied. Css applied Any tag like <div>, <p>, <h1>. <table>
  • Property – A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc.
  • Value – Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

here is a few selectors: CSS selectors are used to “find” (or select) HTML elements based on their element name, id, class, attribute, and more.

ID selectors

You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule.

#header { color:#ddd; }

 	 	

class Selector

The class selector selects elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class=”center” will be red and center-aligned:

.header { color:#ddd; }

 	 	

Attribute Selectors

You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text.

input[type = "text"]{ color:#ddd; }

 	 	
[disabled]
Selects all elements with a “disabled” attribute.
[type=’button’]
Selects elements with a “button” type.
[class~=key]
Selects elements with the class “key” (but not e.g. “keyed”, “monkey”, “buckeye”). Functionally equivalent to .key.
[lang|=es]
Selects elements specified as Spanish. This includes “es” and “es-MX” but not “eu-ES” (which is Basque).
[title*=”example” i]
Selects elements whose title contains “example”, ignoring case. In browsers that don’t support the “i” flag, this selector probably won’t match any element.
a[href^=”https://”]
Selects secure links.
img[src$=”.png”]
Indirectly selects PNG images; any images that are PNGs but whose URL doesn’t end in “.png” (such as when there’s a query string) won’t be selected.

Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality.

.header h2{ color:#ddd; }

 	 	

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

.header h2, h1, Div.content, #header { color:#ddd; font-size:12px; }

 	 	

Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type.

*{ color:#ddd;}

 	 	

Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

Ul em { color:#000;}

Pseudo-classes Selectors

A CSS pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector.

a:hover { color:#000;}

List of pseudo-classes

  • :link
  • :visited
  • :active
  • :hover
  • :focus
  • :first-child
  • :last-child
  • :nth-child
  • :nth-last-child
  • :nth-of-type
  • :first-of-type
  • :last-of-type
  • :empty
  • :target
  • :checked
  • :enabled
  • :disabled