Get In Touch

Blog


web design

Top 9 Website Builder Tools used in UAE

What’s trending in the UAE? Website Builders!

Bootstrapping a business entails certain challenges that you may not be able to overcome initially. These tools are meant for that special phase of yours. Without any professional help, you’ll be able to set up a simple website for your start-up.

Continue reading

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