john400 john400 - 8 months ago 42
CSS Question

Meaning of this CSS

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..:)

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

See this question for more information

For Example


		div > p {
			background-color: yellow;


		<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 -->

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




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