CSS Writing style doubts
# May 24, 2013 at 10:31 am
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 thatI 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.
>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.
You must be logged in to reply to this topic.