Does the > make a difference in this CSS3?

Question

I am new to the CSS3 programming. I am working on a simple module box and I was wondering if the > makes any really different. I tried it with and without and it worked each time the way it was supposed to so I was really wondering what it is used for.

  .modalDialog > div

Code:

.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 50px 20px 13px 20px;
    border-radius: 0px; /*changes from a rectangle to a circle*/
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

All Code:

<html>
<head>
<title> </title>
<style>
/*
This is needed for the box to open properly
*/
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top:    0;
    right:  0;
    bottom: 0;
    left:   0;
    background: rgba(0,0,0,0.8);
    z-index: 99999;
    opacity:0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

/*
This is needed for the box to open properly
*/
.modalDialog:target {
    opacity:1;
    pointer-events: auto;
}

/*
This is needed for the box to open properly
*/
.modalDialog > div {
    width: 300px;
    position: relative;
    margin: 10% auto;
    padding: 50px 20px 13px 20px;
    border-radius: 0px; /*changes from a rectangle to a circle*/
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999);
}

.close {
    background: #AAFF61; /*the color of the closing circle*/
    color: #FF00FF;      /*The x in the box*/
    line-height: 25px;   /*This is the size of the closing circle with X -- it can be made an oval*/
    position: absolute;
    right: -12px;        /*position of the closing circle and X (it can be move all over the screen */
    text-align: center;
    top: -10px;          /*moves the position of the circle and X*/
    width: 24px;         /*squishes the circle and X*/ 
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px; /*squishes circle and X*/
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
</style>
</head>
<body>
<a href="#oMl">Open Modal</a>
<div id="oMl" class="modalDialog">
    <div>
        <a href="#close" title="Close" class="close">X</a>
        <h2><center> Invalid Password and UserID!!!</center></h2>
        <p><b><center>Please re-enter information if you wish to continue the logon process!</center></b></p>
    </div>
</div>
</body>
</html>

See [What does the “>” (greater-than sign) CSS selector mean?](http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) — Aibrean, Jul 21 '14 at 18:12

Guffa · Accepted Answer · 2014-07-22T11:05:30.990

0

The > operator is the direct descendant operator.

The selector .modalDialog > div matches any div that is a child in the element with the class modalDialog. The selector .modalDialog div matches any div that is anywhere in the modalDialog element, not just direct children.

If there is only div elements that are children in the modalDialog element, and no other div elements in it, then there is no difference in what the selectors will match.

Example:

<div class="modealDialog">
  <div>This will be matched by both selectors</div>
  <p>
    <div>This will not be matched by the selector with the direct descendant operator</div>
  </p>
  <div>This will be matched by both selectors</div>
</div>

edited Jul 22 '14 at 11:05

answered Jul 21 '14 at 18:13

Guffa

687,336
108
737
1,005

so any div that comes under this id and its tag will reflex this because it is an direct child. Can you post up an actual code example. Thank you. This does help, however. – Jul 22 '14 at 02:58
if you had two nested DIV tags then it would not work for the second DIV tag.

this would work because each one is only one level down from the other DIV tag. But if they were nested inside of each of them than they would not be. – Jul 22 '14 at 03:00
1

@user3376708: Yes, that is right. – Guffa Jul 22 '14 at 11:06
Are there any other descendant operators? – Jul 22 '14 at 17:44
@user3376708: Yes, space is the regular descendant operator. – Guffa Jul 22 '14 at 20:41
So if you have just one space between tag like DIV H1 then that would mean any tag in the DIV tag that is an H1 would be affected. – Jul 22 '14 at 20:53
@user3376708: Exactly. Well, you can have more than one space and it still counts as the space operator. For example `div h1` and `div h1` is the same. – Guffa Jul 22 '14 at 21:02
What about the : does that matter? – Jul 23 '14 at 01:25
@user3376708: Which colon? Do you mean pseudo-selectors? – Guffa Jul 23 '14 at 01:38
Yes, selectors in a style sheet < spaces : . # – Jul 23 '14 at 13:07
@user3376708: I don't understand the question. For what would it matter? – Guffa Jul 23 '14 at 13:19
I was just curious as to how many different separators could be used in a CSS3 style sheet. – Jul 23 '14 at 16:05
@user3376708: That is virtually unlimited, you can for example us a selector like `body.large div#infoPanel.largePanel a.info.me[name=info]>span.more:hover .infoBox.hidden`, but you should naturally try to keep the selectors as uncomplicated as possible. – Guffa Jul 23 '14 at 17:35
so you would have body.large as one style and body.small as another and then possibly body.normal or even just body { } and the h1.mySpecial which would be for an ID or div#infoPanel.A.B.C.D.E and so forth. Could you post up a style sheet that shows some of these from simple to complex. Thank you. – Jul 23 '14 at 17:51
@user3376708: How to use CSS selectors is a little beyond an answer here. You can look up some tutorials on how to use selectors, and when to use what selector. Here are some: http://css.maxdesign.com.au/selectutorial/ , https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors , http://csswizardry.com/2011/09/writing-efficient-css-selectors/ – Guffa Jul 23 '14 at 19:11

Does the > make a difference in this CSS3?

1 Answers1