6

What does the css selector * + * actually mean? You can see it it in google chrome's console when you do an inspect element. According to me it seems like applying a style to "Every second child" , but still want to be sure. Can anyone help me out?

Example:

*+* {
   margin-top:1em;
}
raina77ow
  • 103,633
  • 15
  • 192
  • 229
pogbamessi
  • 311
  • 3
  • 17
  • 1
    possible duplicate of [What is the logic behind sibling selectors * + * and * ~ *?](http://stackoverflow.com/questions/16695556/what-is-the-logic-behind-sibling-selectors-and) – BoltClock May 01 '15 at 15:43

4 Answers4

11

* + * means 'any element that has a previous sibling' - in other words, is not a first child.

raina77ow
  • 103,633
  • 15
  • 192
  • 229
5

plus sign (+) means, if the second selectors directly is a sibling to the first selector:

h1+h2 {margin: 1em;}

h2 {margin: 2em;}

all h2 have 2em margin, except the one that directly follows a h1, that one has 1em margin.

hopes that will make it clear for you

Mark
  • 6,762
  • 1
  • 33
  • 50
1

As Specified in W3C documentation it represents the "Adjacent Sibling Combinator".

div + p

Selects all <p> elements that are placed immediately after <div> elements

Ranjith
  • 134
  • 4
0

Same as *:not(:first-child) but is shorter. I would prefer to write it out the long way as I think it's more readable, but I can see why a minifier would prefer *+*

Dustin Poissant
  • 3,201
  • 1
  • 20
  • 32