What does the plus sign CSS selector mean

Question

For example   p   p        Some declarations        I don t know what the   means  What s the difference between this and just defining a style for p without   p

User · Answer

It would match any element p that s immediately adjacent to an element  p    See  http   www w3 org TR CSS2 selector html

User · Answer

selector is called Adjacent Sibling Selector    For example  the selector p   p  selects the p elements immediately following the p elements   It can be thought of as a looking outside selector which checks for the immediately following element    Here is a sample snippet to make things more clear     x000D   x000D  body   x000D    font-family  Tahoma  x000D    font-size  12px  x000D    x000D  p   p   x000D    margin-left  10px  x000D    x000D   lt div gt  x000D     lt p gt Header paragraph lt  p gt  x000D     lt p gt This is a paragraph lt  p gt  x000D     lt p gt This is another paragraph lt  p gt  x000D     lt p gt This is yet another paragraph lt  p gt  x000D     lt hr gt  x000D     lt p gt Footer paragraph lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Since we are one the same topic   it is worth mentioning another selector    selector  which is General Sibling Selector  For example  p   p selects all the p which follows the p doesn t matter where it is  but both p should be having the same parent    Here is how it looks like with the same markup     x000D   x000D  body   x000D    font-family  Tahoma  x000D    font-size  12px  x000D    x000D  p   p   x000D    margin-left  10px  x000D    x000D   lt div gt  x000D     lt p gt Header paragraph lt  p gt  x000D     lt p gt This is a paragraph lt  p gt  x000D     lt p gt This is another paragraph lt  p gt  x000D     lt p gt This is yet another paragraph lt  p gt  x000D     lt hr gt  x000D     lt p gt Footer paragraph lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Notice that the last p is also matched in this sample

User · Answer

It s the Adjacent sibling selector   From Splash of Style blog      To define a CSS adjacent selector  the   plus sign is used   h1 p  color blue         The above CSS code will format the   first paragraph after  not inside  any h1 headings   as blue    h1 gt p selects any p element that is a direct  first generation  child  inside  of an h1 element     h1 gt p matches  lt h1 gt   lt p gt  lt  p gt   lt  h1 gt    lt p gt  inside  lt h1 gt     h1 p will select the first p element that is a sibling  at the same level of the dom  as an h1 element     h1 p matches  lt h1 gt  lt  h1 gt   lt p gt  lt p  gt    lt p gt  next to after  lt h1 gt

User · Answer

p p    styling the code    p p    simply mean find all the adjacent sibling paragraphs with respect to first paragraph in DOM body        lt div gt       lt input type  text  placeholder  something  gt       lt p gt This is first paragraph lt  p gt       lt button gt Button  lt  button gt       lt p gt  This is second paragraph lt  p gt       lt p gt This is third paragraph lt  p gt       lt  div gt       Styling part       lt style type  text css  gt          p p              color  red              font-weight  bolder                 lt  style gt      It will style all sibling paragraph with red color    final output look like this

User · Answer

is the adjacent sibling selector  It will select any p DIRECTLY AFTER  a p  not a child or parent though  a sibling

User · Answer

It means it matches to every p element  which is immediately adjacent  www snoopcode com css examples css-adjacent-sibling-selector

User · Answer

The Plus     will select the first immediate  element  When you use   selector you have to give two parameters  This will be more clear by example    here div and span are parameters  so in this case only first span after the div will be styled     div  span     color  green     padding  100px           lt div gt The top or first element   lt  div gt          lt span  gt this is span immediately after div  this will be selected lt  span gt          lt span gt This will not be selected lt  span gt    Above style will only apply to first span after div  It is important to note that second span will not be selected

User · Answer

presents one of the relative selectors  Here is a list of all relative selectors  div p - All  lt p gt  elements inside of a  lt div gt  element are selected  div  gt  p - All  lt p gt  elements whose direct parent is  lt div gt  are selected  It works backwards too  p  lt  div  div   p - All  lt p gt  elements placed immediately after a  lt div gt  element are selected  div   p - All  lt p gt  elements that are preceded by a  lt div gt  element are selected  Here is some more about selectors

User · Answer

The   sign means select an  quot adjacent sibling quot  For example  this style will apply from the second  lt p gt    x000D   x000D  p   p      font-weight  bold     x000D   lt div gt      lt p gt Paragraph 1 lt  p gt      lt p gt Paragraph 2 lt  p gt   lt  div gt  x000D   x000D   x000D    Example See this JSFiddle and you will understand it  http   jsfiddle net 7c05m7tv   Another JSFiddle  http   jsfiddle net 7c05m7tv 70    Browser Support Adjacent sibling selectors are supported in all modern browsers   Learn more  http   css-tricks com almanac selectors a adjacent-sibling  http   www w3 org TR CSS2 selector html adjacent-selectors https   developer mozilla org en-US docs Web CSS Adjacent sibling selectors

User · Answer

It selects the next paragraph and indents the beginning of the paragraph from the left just as you might in Microsoft Word

User · Answer

See adjacent selectors on W3 org   In this case  the selector means that the style applies only to paragraphs directly following another paragraph   A plain p selector would apply the style to every paragraph in the page     This will only work on IE7 or above  In IE6  the style will not be applied to any elements  This also goes for the  gt  combinator  by the way   See also Microsoft s overview for CSS compatibility in Internet Explorer

User · Answer

The   selector targets the one element after  On a similar note  the   selector targets all the elements after  Here s a diagram  if you re confused

[css] What does the "+" (plus sign) CSS selector mean?

Examples related to css

Examples related to css-selectors