Can someone explain the use of ">" in a css declaration?

HTML-CSS
#1

I’m working on the product page, and I’m doing my best to really tear apart the example and see what every little thing does… This syntax is leaving me utterly confused, however:

.logo > img {
  width: 100%;
  height: 100%;
  max-width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-left: 20px;
}

What is the meaning of the right carat? Why is it necessary? Can’t you accomplish the same thing without it? WHY IS IT IMPOSSIBLE TO GOOGLE?

Any help is very much appreciated!

#2

The element>element selector is used to select elements with a specific parent.

> selector

list of selectors

2 Likes
#3

Ok, one more question on this @ArielLeslie I found these definitions:

**Selector:**
div p
All <p> elements that are inside a <div> element.

**Selector:**
div > p
All <p> elements where the parent is a <div> element.

Can you explain when an element would be inside another element and not have that element be its parent? Right now, this syntax seems redundant to me!

#4 
<div>
    <form>
        <p>This is a paragraph. Its parent is a form. The div is its grandparent.</p>
    </form>
</div>
1 Like
#5

Ah ok. I’m understanding a bit more why the “>” is used mostly with classes and ids then. There’s no grandparent selector, right? XD

Thank you @ArielLeslie for being so responsive!! You help to make the learning journey not as daunting!

#6

You could chain selectors for specificity. Let’s say that you want all the links that are inside explanatory text of a form to be styled without the underline, so it looks less cluttered.

form>.explanyText>a {
    text-decoration: none;
}

If you wanted all links that are inside of a form at any level of nesting:

form a {
    text-decoration: none;
}

Avoiding being too broad with your selectors means that you will have fewer unanticipated side effects. Often when you are working on large or long-running projects, you end up writing selectors that exist to create an exception for an overly broad rule.

I’m glad that I’m able to help in my small way. This type of curiosity is going to help you immensely on your journey. Happy coding!

P.S. - Never forget:
sucking at something is the first step toward being sort of good at something

1 Like