Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css and/or SASS + (sibling) selector upwards [duplicate]

Tags:

sass

In CSS there is no way to select a sibling with plus if the sibling is above in the output, a preceding element in the html.

For example

<div class="first"> <div class="second">  .second + .first { style applied to div.first} 

Is there anyway to do this in SASS/SCSS?

like image 809
petergus Avatar asked Mar 06 '13 11:03

petergus


People also ask

What is the difference between '+' and '~' sibling selectors?

2 Answers. Show activity on this post. + will only select the first element that is immediately preceded by the former selector. ~ selector all the sibling preceded by the former selector.

How do I target a second sibling in CSS?

You use the general sibling selector (~) in combination with :hover . The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.


1 Answers

SASS support all CSS3 selectors. Sibling + is one of them. But it does not bring some extra features. It means you can do

first {   + second {       font-size: smaller;   } } 

But you can't impact a parent with it ...

Ps : it seems to be a features of CSS4 :)

like image 74
Xavier Avatar answered Sep 17 '22 00:09

Xavier