Get In Touch

Blog


Category archive: web design

10 Reasons to Switch to a Responsive Website Immediately

For many businesses, switching to a responsive website can be perceived as a significant investment that takes time, money and resources. But in a world of mobile and wearable web devices, companies which ignore responsive web design do so at their own risk. Here are ten reasons why you need to switch to a responsive website immediately.

 

Continue reading

CSS Pseudo Classes and Elements

CSS Pseudo Classes And Elements

What Are CSS Pseudo Classes?

Pseudo classes are used in CSS to define a specific state of an element.

Basic syntax for using pseudo class is,
element:pseudo_class { property: value; }

Pseudo classes are mostly used by web designers to define the dynamic states of an element based on user interaction.

like,

  • Applying a style to an element when users hover over it.
  • Style an element when it gets focus.

Example of Pseudo Classes

Pseudo Class Description
:active For styling active links
:checked For styling every checked element
:disabled For styling every disabled element
:empty For styling every element that has no children
:enabled For styling every enabled element
:first-child For styling every elements that is the first child of its parent
:first-of-type For styling every element that is the first element of its parent
:focus For styling the element that has focus
:hover For styling links on mouse over
:in-range For styling elements with a value within a specified range
:invalid For styling all elements with an invalid value
:lang(language) For styling every element with a lang attribute value.
:last-child For styling every elements that is the last child of its parent
:last-of-type For styling every element that is the last element of its parent
:link For styling all unvisited links
:not(selector) For styling every element that is not a element
:nth-child(n) For styling every element that is the second child of its parent
:nth-last-child(n) For styling every element that is the second child of its parent
:nth-last-of-type(n) For styling every element that is the second element of its parent
:nth-of-type(n) For styling every element that is the second element of its parent
:only-of-type For styling every element that is the only element of its parent
:only-child For styling every element that is the only child of its parent
:optional For styling elements with no “required” attribute
:out-of-range For styling elements with a value outside a range
:read-only For styling elements with a “readonly” attribute
:read-write For styling elements with no “read only” attribute
:required For styling elements with a “required” attribute
:root For styling the document root element
:target For styling the current active element
:valid For styling all elements with a valid value
:visited For styling all visited links

 

What Are Pseudo Elements?

Pseudo elements differ from pseudo classes in that, they are used to style a specific ‘part’ of an element.
If you need to insert certain content after or before an element you can use “Pseudo elements”

Basic syntax for using pseudo class is,

element::pseudo_element { property: value; }

Some pseudo elements are,

Pseudo Element Description
::after Insert content after
::before Insert content before
::first-letter Style the first letter
::first-line Style the first line
::selection Style the portion of an element that is selected by a user