Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When to use `>` sign in CSS? [duplicate]

Tags:

Possible Duplicate:
What does “>” mean in CSS rules?

I came across many many websites and I saw many of them use this type of notation in their css file for creating navigation bar like :

#navigation ul li > ul {   /* some code in between */ } 

but when i omit the > sign as

#navigation ul li ul {   /* some code in between */ } 

this still works the same way.

what is the difference and when to use > sign ?

like image 693
monk Avatar asked Jan 09 '12 10:01

monk


People also ask

What does * *:: before *:: After mean in CSS?

:before selector inserts something before the content of each selected element(s). :after selector inserts something after the content of each selected element(s). so *:before like Dan White said would be before all elements and *:after will be after all elements.

What is the use of tilde symbol in CSS?

What does symbol tilde (~) denotes in CSS ? In CSS, the symbol tilde(~) is know as Subsequent-sibling Combinator (also known as tilde or squiggle or twiddle or general-sibling selector). As the name suggests it is made of the “tilde” (U+007E, ~) character that separates two sequences of simple selectors.

How do you duplicate something in CSS?

To copy the CSS code of any element with CSS Scan, click on the element you want to copy. It's as simple as that. A single click and it's yours. Once the code is copied, you can paste it anywhere.

What is the use of * in CSS?

The asterisk (*) is known as the CSS universal selectors. It can be used to select any and all types of elements in an HTML page. The asterisk can also be followed by a selector while using to select a child object. This selector is useful when we want to select all the elements on the page.


1 Answers

> Means the direct child of a selector, so

li > a will ONLY match an <a> which is directly inside an <li> for example.

If the html was <li><span><a> the <a> would not be matched.

Removing the > will match any <a> nested inside an <li>, irrespective of other things around it, so li a would match the <a> in

<li><a> but also in <li><span><a>, for example.

Here's more information on direct Child selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Child_selectors

like image 147
dougajmcdonald Avatar answered Oct 04 '22 15:10

dougajmcdonald