Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Writing style doubts

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #45069
    KP1
    Participant

    Hi friends,

    i saw a css writing style like _.classname> span_

    i know inherited styling method like _.classname span_

    is there any difference between two type writing style ?

    and another double about _span:after_

    i didn’t get the meaning of :after , :before properties and usage

    Thanks in advance

    #136342
    unasAquila
    Participant

    the first `.classname > span` is a direct descendant `selector` meaning that

    I am targeted with >

    whereas `.classname span` is an element element selector and will select any span contained in the element.

    I am not targeted

    hopefully this explains

    here is a quick [demo](http://codepen.io/unasAquila/pen/psoGh)

    #136343
    Paulie_D
    Member

    :before & :after

    From an article by Chris

    >Content-related pseudo “elements”

    >:before – Is able to add content before a certain element. For example, adding an opening quote before a blockquote or perhaps an preceding image to set apart a particular paragraph.

    >:after – Is able to add content after a certain element. For example, a closing quote to a blockquote. Also used commonly for the clearfix, where an empty space is added after the element which clears the float without any need for extra HTML markup.

    >Quick note

    >These are appropriately called pseudo “elements” (not selectors) because they don’t select any “real” element that exists on the page. This goes for these two, as well as the previous sections :first-letter and :first-line. Make sense? Like the first letter that :first-letter selects isn’t an element all to itself, it’s just a part of an existing element, hence, pseudo element.

    #136345
    Paulie_D
    Member

    Here’s a quick example:http://codepen.io/seraphzz/pen/bpaJH

    As you can see the “Before Text” and “After Text” don’t appear in the HTML at all, rather they have been inserted by way of CSS.

    There are a lot of useful things that **can* be done with these pseudo elements but although I have done so for demonstration purposes they should (in an ideal world) NOT be used to insert actual content.

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.