{"componentChunkName":"component---src-templates-tag-js","path":"/tags/selector/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"fields":{"slug":"/engineering/ab-use-css2-sibling-selectors/"},"html":"

Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.

\n

I’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.

\n

What are sibling selectors.

\n

Sibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).

\n

Squiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.

\n

Great, give me the deets.

\n

\n \n \n

\n

Have you ever seen our support docs?

\n

Would you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.

\n

Anyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.

\n
.sibling:first-child {\n/*styles for first sibling*/\n}
\n

Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.

\n
.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}
\n

Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.

\n

Let’s go crazy.

\n

How do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.

\n
<div:first-child + div + div {\n/*styles*/\n}
\n

The best part is. It’s backwards compatible.

\n

What about the 12th child? Well, you can just painfully type all those “+ div”.

\n

Now, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.

\n

Keep experimenting with this technique and be free from any restrictions of IE8.

\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png","srcSet":"/static/945890eb5408214619f2dbcdf3da2fcf/69585/sibling-selectors.png 200w,\n/static/945890eb5408214619f2dbcdf3da2fcf/497c6/sibling-selectors.png 400w,\n/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]}},"pageContext":{"tag":"Selector"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}