Meaning of this CSS

Question

I have been doing CSS and Bootstrap for quite some time now and while watching an online tutorial the teacher mentions these lines but skips the meaning of it.

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus{
   color: #fff;
    background: #1A237E;
}

Now I guess that the code in the curly braces will execute if we hover over the link but what's that greater than sign and how does the code works.It will be quite heplful if someone could explain it..:)

score 2 · Accepted Answer · edited May 23 '17 at 11:52

2

> is the child combinator, also known as the direct descendant combinator.

See this question for more information

For Example

<html>

<head>
 <style>
  div > p {
   background-color: yellow;
  }
 </style>
</head>

<body>

 <div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <span><p>Paragraph 3 in the div.</p></span>
  <!-- not Child but Descendant -->
 </div>

 <p>Paragraph 4. Not in a div.</p>
 <p>Paragraph 5. Not in a div.</p>

</body>

</html>

source

Here, (when you run this code), you can see that css will be applied only to <p> elements that are wrapped inside <div> tag. It's not directly applied to all the <p> tags

edited May 23 '17 at 11:52

Community

1
1

answered Jul 21 '16 at 03:29

Raman Sahasi

30,180
9
58
71

Thanks..Now I understand it..:) – john400 Jul 21 '16 at 03:43
@john400 I'm glad :) – Raman Sahasi Jul 21 '16 at 03:44

score 0 · Answer 2 · edited Jul 21 '16 at 03:30

0

> means it targets it's direct children.

That means the selector div > p.some_class only selects paragraphs of .some_class that sit directly inside a div, not paragraphs that are nested further within.

edited Jul 21 '16 at 03:30

Raman Sahasi

30,180
9
58
71

answered Jul 21 '16 at 03:29

Wim Mertens

1,780
3
20
31

score 0 · Answer 3 · answered Jul 21 '16 at 03:33

0

The > is to indicate the next selector is a direct child of the preceding selector.

That is .parent > .child {} selects elements with a class of child which are direct child of elements of class parent.

answered Jul 21 '16 at 03:33

Brett DeWoody

59,771
29
135
184

Meaning of this CSS

3 Answers3