I M Rubel

Java / Android Developer, Trainer, Writer, Speaker

Wednesday, September 24, 2014

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

On 3:02 AM by Unknown in ,    4 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.
RELATED POSTS

4 comments:

  1. UnknownSeptember 24, 2014 at 11:36 PM

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

    ReplyDelete
    Replies
    1. UnknownSeptember 25, 2014 at 12:18 AM

      Thanks for notice little bro :)

      Correction done!

      And also thanks for finding this as nice ;)

      Delete
  2. BloggerFebruary 4, 2017 at 5:45 AM

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

    ReplyDelete
  3. mohitNovember 28, 2018 at 3:16 AM

    This is good piece of writing and pleasant urging commented
    here, I am really enjoying by these
    Splitwise
    appvn

    ReplyDelete

Subscribe to: Post Comments (Atom)