Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why use ">" in CSS?

If I want to add styling to all p elements inside of a div, why should I use

div > p{

  *style here*

}

as opposed to just

div p{

  *style here*

}

furthermore, if I want to use a pseudo class, why would I then choose to use ">"

div > p:first-child{

  *style here*

}

instead of

 div p:first-child{

   *style here*

 }

Are there any benefits or drawbacks? what does that operator do?

like image 232
kjh Avatar asked Aug 10 '12 00:08

kjh


People also ask

Why do we use dot in CSS?

# in CSS means it is an ID and it can be applied to one element per page.

What are the 3 types of CSS?

There are three types of CSS which are given below: Inline CSS. Internal or Embedded CSS. External CSS.

What are CSS Combinators?

A combinator is something that explains the relationship between the selectors. A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

How do you use selectors in CSS?

Type “css=input[type='submit']” (locator value) in Selenium IDE. Click on the Find Button. The “Sign in” button will be highlighted, verifying the locator value. Attribute: Used to create the CSS Selector.


2 Answers

It's the direct child, not a recursive match.

CSS

div > p {

}

HTML

<div>
   <p>Match</p>
   <span>
      <p>No match</p>
   </span>
</div>

CSS

div p {

}

Markup

<div>
   <p>Match</p>
   <span>
      <p>Match</p>
   </span>
</div>
like image 170
Gabe Avatar answered Sep 20 '22 18:09

Gabe


Because it means direct child.

Your second example would match the p in this example

<div>
  <header>
    <p>
    </p>
  </header>
</div>
like image 24
Daniel A. White Avatar answered Sep 17 '22 18:09

Daniel A. White