Java / Android Developer, Trainer, Writer, Speaker

Wednesday, September 24, 2014

On 3:02 AM by M Rubel in ,    3 comments

Like the article?


Yes, the bigger question is what the heck is this Greater Than Symbol in CSS ( Cascading Style Sheet )! Well, I'm going to explain with example below.




Why > ( Greater Than Symbol ) is used in CSS?

 

css greater than symbol
css greater than symbol

 


Greater Than Symbol ( > ) in CSS is used to indicate child on any parent like division ( <div> </div> ) or such kind of things. It's like you are indicating a child from a parent. If you are not clear yet, I would like to give an example:


HTML Part:


<html>
<head>
</head>
<body>
<div>
<p class="about_me"> Hi! My name is Rubel! I studied in Computer Science and Engineering. I worked on Mobile Application, Google Adsense etc.</p>
<span>
<p class="about_me"> I would like to say something about my career in this section.</p>
<span>
</div>
</body>
</html>


CSS Part ( where we used greater than symbol ):

<style>
body {
background: #2b3c50;
color: #00aee5;
}
div > p.about_me {

color: #fff;
height: 200px;
width: 400px;
border: 1px solid #888;
margin: 0 auto;
padding: 30px;
}
div {
color: #888;
}

</style>

Template with above Code:

example of CSS greater than symbol use
example of CSS greater than symbol use



What is the Use of > ( Greater than symbol in CSS ) ?



To access all the direct child of any division ( <div> </div ) or same type class which is not included in other things like span ( <span> </span> ).

In the second paragraph class ( in to the <span> </span> ), that doesn't allows the CSS codes written in “ div > p.about_me ” class as that is not the direct class of division ( <div> </div> ) for being in span ( <span> </span> ).

You can see, though both paragraph are named same ( about_me ) second one is not running as the same way of first paragraph and that is because the use of Greater Than Symbol in CSS.




If you are loving these article, don't forget to share for others and subscribe for yourself to get more.

3 comments:

  1. In the last paragraph's heading, you used smaller than "<" symbol ! :P
    Apart from this, nice article. :]

    ReplyDelete
    Replies
    1. Thanks for notice little bro :)

      Correction done!

      And also thanks for finding this as nice ;)

      Delete
  2. If you are looking for a reputable contextual ad network, I recommend that you have a look at Clicksor.

    ReplyDelete