Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS Pseudo-elements and Pseudo-classes

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 74
    Comment on it

    Hello Friends,

    As we already knows that, CSS reach to next level (CSS3.0). There are lots of elements in css which help us to build different style and UI behavior. Today, I am going to talk about Pseudo-elements and Pseudo-classes.

    Introduction

    What is Pseudo?

    In UI term, 'Pseudo' prefix is term of reflection of the style pattern towards the different elements of HTML attributes.

    For Example-

    Anchor tag<a> have different kind of style behavior such as- a:link, a:hover, a:visited etc.

    Here, anchor tag "<a>" have different style and different behavior in different mode such as content link in 'normal mode' and content link in 'hover mode' and content link in 'visited mode'.

    What is Pseudo-elements or CSS Pseudo Elements ?

    A CSS Pseudo-element is apply to style definite section of an element. In simple words, if we need a different outlook to specific part of an Web content.

    For example, it can be used to:

      • Design the first text, or line, of an element

      • Insert particular data before, or after the web content of an element.


    Design the first letter of the text in all <h1> elements:

    h1::first-letter  {
        color:  #ff0000;
        font-size: 20px;
    } 
    

    Syntax

    The Syntax of Pseudo-elements:

    selector::pseudo-element  {
        property:value;
    }
    

    All pseudo-elements

    • ::after

    • ::before

    • ::first-letter

    • ::first-line

    • ::selection

    • ::backdrop

    **Notes-

    In old version of CSS, we used just one colon(:) instead of double colons(::). 'Double Colon' feature is a part of CSS3 and now a days most browsers support both values.

    Below I am providing the best way to know, compatibility of browsers and Psuedo-Elements.

    Browser

    Lowest Version

    Support of

    Internet Explorer

    8.0

    :pseudo-element

    9.0

    :pseudo-element

    ::pseudo-element

    Firefox (Gecko)

    1.0 (1.0)

    :pseudo-element

    1.0 (1.5)

    :pseudo-element

    ::pseudo-element

    Opera

    4.0

    :pseudo-element

    7.0

    :pseudo-element

    ::pseudo-element

    Safari (WebKit)

    1.0 (85)

    :pseudo-element

    ::pseudo-element



    What are Pseudo-classes ?

    A Pseudo-class is a way to define a unique part of HTML elements. A Pseudo-class is similar to a simple class of HTML.

    For Example-

    • To Design a content or an element, when a user mouses over it.

    • To separately Design visited and unvisited links

    **Note-

    A pseudo-class starts with a colon (:).

    Syntax

    The Syntax of Pseudo-elements:

    selector:pseudo-class {
      property:value;
    } 
    

    Anchor Links can be displayed in different ways:

    /* For unvisited link */

    a:link {
      color: #FF0000;
    }
    

    /* For visited link */

    a:visited {
      color: #00FF00;
    }
    

    /* For mouse over link */

    a:hover {
      color: #FF00FF;
    }
    

    /* For selected link */

    a:active {
      color: #0000FF;
    }
    

    Pseudo-classes use formal elements but in certain situation, like when elements have relative position to siblings or when elements are in a particular condition.

    Following are the pseudo-classes in CSS3:

    Dynamic pseudo-classes UI element states pseudo-classes Structural pseudo-classes Other pseudo-classes

    :link

    :enabled

    :first-child

    :not(x)

    :visited

    :disabled

    :nth-child(n)

    :target

    :hover

    :checked

    :nth-last-child(n)

    :lang(language)

    :active


    :nth-of-type(n)


    :focus


    :nth-last-of-type(n)




    :last-child




    :first-of-type




    :last-of-type




    :only-child




    :only-of-type




    :root




    :empty


    End of this Session

    In this session, I covered introductory part of "Pseudo-Elements" and "Pseudo-classes". There are lot more to know about these 2 elements. In my next session, I'll cover the differences and the brief overview of all psuedo elements and pseudo-classes.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: