CSS selector what is it

Question

I ve seen the  greater than    gt   used in CSS code a few times  but I can t work out what it does  What does it do

User · Answer

As others have said  it s a direct child  but it s worth noting that this is different to just leaving a space    a space is for any descendant    lt div gt     lt span gt Some text lt  span gt   lt  div gt    div gt span would match this  but it would not match this    lt div gt     lt p gt  lt span gt Some text lt  span gt  lt  p gt   lt  div gt    To match that  you could do div gt p gt span or div span

User · Answer

It is a Child Selector   It matches when an element is the child of some element  It is made up of two or more selectors separated by       Example s    The following rule sets the style of all P elements that are children of BODY   body  gt  P   line-height  1 3     Example s    The following example combines descendant selectors and child selectors   div ol gt li p   It matches a P element that is a descendant of an LI  the LI element must be the child of an OL element  the OL element must be a descendant of a DIV  Notice that the optional white space around the     combinator has been left out

User · Answer

gt  selects all direct descendants children  A space  selector will select all deep descendants whereas a greater than  gt  selector will only select all immediate descendants  See fiddle for example    x000D   x000D  div   border  1px solid black  margin-bottom  10px    x000D   a b   color  red       every John is red    x000D   b  gt  b   color  blue       Only John 3 and John 4 are blue    x000D   lt div class  a  gt  x000D     lt p gt  lt b gt John 1 lt  b gt  lt  p gt  x000D     lt p gt  lt b gt John 2 lt  b gt  lt  p gt  x000D     lt b gt John 3 lt  b gt  x000D     lt b gt John 4 lt  b gt  x000D   lt  div gt  x000D   x000D   lt div class  b  gt  x000D     lt p gt  lt b gt John 1 lt  b gt  lt  p gt  x000D     lt p gt  lt b gt John 2 lt  b gt  lt  p gt  x000D     lt b gt John 3 lt  b gt  x000D     lt b gt John 4 lt  b gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

gt  selects immediate children  For example  if you have nested divs like such    lt div class  outer  gt       lt div class  middle  gt           lt div class  inner  gt     lt  div gt       lt  div gt       lt div class  middle  gt           lt div class  inner  gt     lt  div gt       lt  div gt   lt  div gt    and you declare a css rule in your stylesheet like such    outer  gt  div               your rules will apply only to those divs that have a class of  middle  since those divs are direct descendants  immediate children  of elements with class  outer   unless  of course  you declare other  more specific rules overriding these rules   See fiddle    x000D   x000D  div   x000D    border  1px solid black  x000D    padding  10px  x000D    x000D   outer  gt  div   x000D    border  1px solid orange  x000D    x000D   lt div class  outer  gt  x000D    div outer - This is the parent  x000D     lt div class  middle  gt  x000D      div middle - This is an immediate child of  outer   This will receive the orange border  x000D       lt div class  inner  gt div inner - This is an immediate child of  middle   This will not receive the orange border  lt  div gt  x000D     lt  div gt  x000D     lt div class  middle  gt  x000D      div middle - This is an immediate child of  outer   This will receive the orange border  x000D       lt div class  inner  gt div inner - This is an immediate child of  middle   This will not receive the orange border  lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt p gt Without Words lt  p gt  x000D   x000D   lt div class  outer  gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt     lt  div gt  x000D     lt  div gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt     lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Side note  If you  instead  had a space  between selectors instead of  gt   your rules would apply to both of the nested divs  The space is much more commonly used and defines a  descendant selector   which means it looks for any matching element down the tree rather than just immediate children as the  gt  does   NOTE  The  gt  selector is not supported by IE6  It does work in all other current browsers though  including IE7 and IE8   If you re looking into less-well-used CSS selectors  you may also want to look at       and  attr  selectors  all of which can be very useful   This page has a full list of all available selectors  along with details of their support in various browsers  its mainly IE that has problems   and good examples of their usage

User · Answer

It is the CSS child selector  Example   div  gt  p selects all paragraphs that are direct children of div   See this

User · Answer

It means parent child  example   html body  that s saying that body is a child of html  Check out  Selectors

User · Answer

It declares parent reference  look at this page for definition   http   www w3 org TR CSS2 selector html child-selectors

[css] CSS '>' selector; what is it?

Examples related to css

Examples related to css-selectors