Loading...

General Sibling in AtoZ CSS Screencast

View: 553    Dowload: 0   Comment: 0   Post by: hanhga   Category: HTML-CSS template   Fields: Other

Transcript

General sibling is a little known but very useful CSS selector.

It allows the styling of an element that is a sibling of another.

We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.

Syntax

The general sibling selector is part of the family of combinator selectors in CSS and is identified with the tilde ~ character. It looks a bit like this:

h2 ~ p {
  color: red;
}

This selector will style any paragraphs that are siblings of a second-level heading and occur after the <h2>.

The benefit of this selector is that the paragraphs don’t have to be adjacent siblings of the <h2>.

<article> 
  <h1>Lorem ipsum</h1> 
  <p>Dolor sit amet</p> 
  <h2>Lorem ipsum</h2> 
  <p>Dolor sit amet</p> 
  <h3>Lorem ipsum</h3> 
  <p>Dolor sit amet</p>
</article>

In this code snippet, both the paragraphs after the <h2> will be red, but the first one will not as it doesn’t come after a <h2>in the document.

This can be a little confusing as all the paragraphs could be said to be “general siblings” of each other but the selector would not match the first one. This could be the reason that this selector has been renamed in the CSS Selectors Level 4 spec to the “following sibling” selector.

<h2>Lorem ipsum</h1> 
<div>
  <p>Dolor sit amet</p> 
</div>

In this case, even though the paragraph comes after the <h2>, the paragraph and <h2> aren’t siblings so our selector won’t match anything here.

Practical Example

Let’s have a look at a practical example.

The Summary and Transcript accordions below use the general sibling selector to determine the open/closed state of each section. This whole behavior is purely handled in CSS; there’s no Javascript here!

The markup for the titles of each section has a hidden <input>, a <h1> with a <label> inside of it, followed by a <div> to contain the accordion content.

Clicking on the label, switches the :checked state of the input and then the general sibling selector allows the styling of the.accordion-content.

When the input is not checked, the max-height of the accordion is set to zero. When the input is checked, the max-heightis set to an unlikely large value – 10000px in this case. Applying a bit of transition gives a smooth sliding animation.

input ~ .episode-accordion {
  max-height: 0;
}
input:checked ~ .episode-accordion {
  max-height: 10000px;
}
.episode-accordion {
  -webkit-transition: all 1s ease-in-out;
          transition: all 1s ease-in-out;
}

Other Child & Sibling Selectors

As this was a rather short episode, let’s take a look at some of the other combinator selectors available in CSS. These are supported since IE7 which should have the vast majority of use-cases well and truly covered.

Descendent Selector

The descendent selector has been around since forever and selects elements matching the second selector while they have the first selector as an ancestor.

div p { 
  color: red;
}

This selector will make all paragraphs in any child element of any <div> red.

Grandchild Selector

The Grandchild selector is similar to the descendent selector but selects elements that match the second selector if they are descendants of any child element of the first selector. It uses the asterisk character, but it’s important to note that this is not the same as the wildcard or universal “star” selector.

div * p { 
  color: red;
}

This selector will make all paragraphs in children of a <div> red.

 

Child Selector

The child selector, signified by the greater than sign, selects elements matching the second selector that are a direct child of elements matching the first selector.

div > p { 
  color: red;
}

This selector will make all paragraphs that are children of a <div> red.

Adjacent Sibling

The adjacent sibling selector is similar to general sibling selector and is signified with the + character. This selector will style elements matching the second selector as long as they appear immediately after an element matching the first selector.

div + p { 
  color: red;
}

This selector will make any paragraphs that directly follow a <div> red.

As I mentioned previously, all these selectors are available in IE7+ so you can (almost certainly) use them right now. Hopefully, they’ll come in handy for your next project.

General Sibling in AtoZ CSS Screencast

We’ll look at the syntax, a practical example and then a quick round up of the other child and sibling selectors in CSS.

Posted on 20-09-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Business/Consulting HTML & CSS Template

    Business/Consulting HTML & CSS Template

    View: 24    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    It's elegant Business HTML Template. You can use it for creating Business, Finance, Corporate, Consulting websites or promoting your services. Looks perfect in all major browsers, tablets, and phones. Clean and commented code lets you customize it...

  • Photography Portfolio HTML/CSS Template

    Photography Portfolio HTML/CSS Template

    View: 28    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Portfolio and Photography HTML5/CSS template build with latest bootstrap framework , best suited for photographers. Features 3 HTML5/CSS3 Templates Video background for the homepage (YouTube Only) Supersized slideshow for the homepage Built on...

  • Creative Login Form with Validation

    Creative Login Form with Validation

    View: 40    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    Upturn customized LOGIN FORM & INPUT STYLES is ready for Desktop, tablet and mobile devices. Simple to implement. Just copy the HTML and link to the CSS,JS file. You can easily edit, change and customize them for yourself. For students or anyone else...

  • Login Form Like Facebook

    Login Form Like Facebook

    View: 36    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    This is a simple Facebook form that can be imported to your site with ease. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't forget to like and share it if you found it...

  • Custom-able Invoice: Easy to Use

    Custom-able Invoice: Easy to Use

    View: 33    Download: 1   Comment: 0

    Category: HTML-CSS template     Fields: none

    Make billing easy with Free Invoice Template. Professional invoices for your business: Proforma, Service, Sales, Freelance. Please don't forget to give credit to original developer because I really worked hard to develop this project and please don't...

  • Awsome Responsive HTML Pages

    Awsome Responsive HTML Pages

    View: 24    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    A responsive html pages. The site have self sliding images on the index page. There are drop down menu with icons on them. The site have bootstrap that makes it responsive to different devices .

  • How To Create an Animated Search Form

    How To Create an Animated Search Form

    View: 273    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    How To Create an Animated Search Form, Learn how to create an animated search form with CSS.

  • How to reset / remove chrome's input highlighting / focus border? used CSS

    How to reset / remove chrome's input highlighting / focus border? used CSS

    View: 224    Download: 0   Comment: 0

    Category: HTML-CSS template     Fields: none

    You have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd