CSS Writing style doubts

[KP1]

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

[unasAquila]

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)

[Paulie_D]

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

[Paulie_D]

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.

[Author]

Posts