CODEWITHSUNDEEP
csstwitter-bootstrapless
Zabba
Zabba

Reputation: 65497

What is the `&::` syntax in LESS CSS?

I've been looking at twitter bootstrap and came across some syntax and I do not know what it does:

From buttons.less:

button.btn,
input[type="submit"].btn {
  &::-moz-focus-inner {
  padding: 0;
    border: 0;
  }

What is the &:: in &::-moz-focus-inner for?

I know the & is for a 'parent selector' and that a : is part of the syntax for a pseudo selector such as :hover, but what is the second : for?

Ps. I've also been looking for a LESS syntax reference but I cannot find any documentation about LESS other than the one page at lesscss.org. Is there no documenation for LESS other than that one page?

Upvotes: 11

Views: 16290

Answers (1)

biziclop
biziclop

Reputation: 14616

Copypaste from

http://www.evotech.net/blog/2007/05/after-v-after-what-is-double-colon-notation/

The double colon replaced the single-colon selectors for pseudo-elements in CSS3 to make an explicit distinction between pseudo-classes and pseudo-elements. For backward compatibility, the single-colon syntax is acceptable for pre-CSS3 selectors. So, :after is a pseudo-class and ::after is a pseudo-element.

This :: notation (double colon notation) was introduced by the W3 in order to “establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.” For more information, visit W3.

Upvotes: 10

Related Questions