What does the greater-than sign CSS selector mean

Question

For example   div  gt  p some class        Some declarations        What exactly does the  gt  sign mean

User · Answer

All p tags with class some class which are direct children of a div tag

User · Answer

gt  is the child combinator  sometimes mistakenly called the direct descendant combinator 1 That means the selector div  gt  p some class only selects paragraphs of  some class that are nested directly inside a div  and not any paragraphs that are nested further within  An illustration   x000D   x000D  div  gt  p some class        background  yellow    x000D   lt div gt       lt p class  some class  gt Some text here lt  p gt       lt  -- Selected  1  -- gt       lt blockquote gt           lt p class  some class  gt More text here lt  p gt   lt  -- Not selected  2  -- gt       lt  blockquote gt   lt  div gt  x000D   x000D   x000D   What s selected and what s not   Selected This p some class is located directly inside the div  hence a parent-child relationship is established between both elements   Not selected This p some class is contained by a blockquote within the div  rather than the div itself  Although this p some class is a descendant of the div  it s not a child  it s a grandchild  Consequently  while div  gt  p some class won t match this element  div p some class will  using the descendant combinator instead     1 Many people go further to call it  quot direct child quot  or  quot immediate child quot   but that s completely unnecessary  and incredibly annoying to me   because a child element is immediate by definition anyway  so they mean the exact same thing  There s no such thing as an  quot indirect child quot

User · Answer

html   lt div gt       lt p class  some class  gt lohrem text  it will be of red color   lt  p gt           lt div gt           lt p class  some class  gt lohrem text  it will  NOT be of red color  lt  p gt        lt  div gt       lt p class  some class  gt lohrem text  it will be  of red color   lt  p gt   lt  div gt    css  div  gt  p some class      color red      All the direct children that are  lt p gt  with  some class would get the style applied to them

User · Answer

gt   greater-than sign  is a CSS Combinator      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   There are four different combinators in CSS3    descendant selector  space   child selector      adjacent sibling selector      general sibling selector       Note   lt  is not valid in CSS selectors       For example     lt  DOCTYPE html gt   lt html gt   lt head gt   lt style gt  div  gt  p       background-color  yellow     lt  style gt   lt  head gt   lt body gt    lt div gt     lt p gt Paragraph 1 in the div  lt  p gt     lt p gt Paragraph 2 in the div  lt  p gt     lt span gt  lt p gt Paragraph 3 in the div  lt  p gt  lt  span gt   lt  -- not Child but Descendant -- gt   lt  div gt    lt p gt Paragraph 4  Not in a div  lt  p gt   lt p gt Paragraph 5  Not in a div  lt  p gt    lt  body gt   lt  html gt    Output       More information about CSS Combinators

User · Answer

The greater sign       selector in CSS means that the selector on the right is a direct descendant   child of whatever is on the left    An example   article  gt  p       Means only style a paragraph that comes after an article

User · Answer

It matches p elements with class some class that are directly under a div

User · Answer

child selector  was introduced in css2    div p     select all p elements decedent of div elements  whereas div   p selects only child p elements  not grand child  great grand child on so on      lt style gt    div p   color red             match both p     div  gt  p   color blue          match only first p     lt  style gt    lt div gt      lt p gt para tag  child and decedent of p  lt  p gt      lt ul gt          lt li gt               lt p gt para inside list   lt  p gt          lt  li gt      lt  ul gt   lt  div gt    For more information on CSS Ce lectors and their use  check my blog  css selectors and css3 selectors

User · Answer

As others mention  it s a child selector  Here s the appropriate link   http   www w3 org TR CSS2 selector html child-selectors

[css] What does the ">" (greater-than sign) CSS selector mean?

Examples related to css

Examples related to css-selectors