Grow your CSS skills. Land your dream job.

CSS Writing style doubts

  • KP1
    # May 24, 2013 at 10:31 am

    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

    # May 24, 2013 at 10:40 am

    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)

    # May 24, 2013 at 10:51 am

    :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.

    # May 24, 2013 at 10:57 am

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".