>* selector - how do I use it?

The instructions state:
There’s a shorthand CSS selector for applying a property to all direct children. Add the > * selector and define the property these elements have in common. Now that you’ve done this you can remove padding-left: 30px; everywhere else.

I don’t understand where I should put it in order for it to work.

In CSS, the > modifies a selector to only target direct children.

div > div {}

selects only DIV-nodes that are direct children of a parent DIV.

div > * {}

selects all nodes that are direct child elements of a parent DIV

> * {}

selects nothing since the modifier needs a selector to modify.

* {}

selects every node in the DOM. It’s actually very wasteful since it caches every HTML node type in its collection, whether it exists in the DOM or not. That’ for another discussion, though.

Without seeing the lesson you are on, I’d go with the,

element > * {}

selector rule and look at the HTML you have to determine which parent element best applies.


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.