Insha Profile picture
22 Jul, 8 tweets, 2 min read
What are CSS Combinators?

Come let's discuss them one by one.

A Thread 👇
A combinator is something that defines the relation between selectors.

There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator.
Types of Combinators:

1️⃣ Descendant selector
2️⃣ Child selector
3️⃣ Adjacent sibling selector
4️⃣ General sibling selector
1️⃣ Descendant selector (space)

The descendant selector matches all elements that are descendants of a specified element.

If we have to select the h1 elements that are the children of an <div> element, then by using the descendant selector, it will be written as follows:
2️⃣ Child selector(>)

A child selector is used to select the element that is the immediate child of the specified element.

In this example, we are selecting the <li> elements that are the direct child of the <ul> element.
3️⃣ Adjacent sibling selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

If we have to select the <p> elements that comes immediately after <h1>, then by using adjacent selector, it will be written as follows:
4️⃣ General sibling selector (~)

The general sibling selector is used to select the element that follows the first selector element and also shares the same parent as the first selector element.

Example- To selects all <p> elements that are next siblings of <div> elements:
That's all for this thread. If you found it useful consider retweeting the first one. It would mean a lot😊🙌

• • •

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Insha

Insha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Insharamin

19 Jul
7 Tools for structuring and optimizing your CSS.

CSS files formatting and optimization is no more a headache for web developers with the help of these hand-picked tools!

A Thread 👇
1️⃣ CSS Optimizer

CSS Optimizer is an online tool to clean, optimize, and compress CSS code.

2️⃣ CSS Beautifier

Code Beautifier is based on CSS Tidy, the popular open-source CSS parser and optimizer. Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have them cleaned up and made pretty.

Read 9 tweets
15 Jul
Do you know what's the best way to learn any programming language?

- The Answer is by building lots of projects 💪

Here's a complete list of projects ranging from -> ( Beginner to advanced level ) for you.

A Thread👇
Html and CSS projects. 💪

1- A Tribute Page
2- Survey Form
3- Technical Documentation Page
4- Personal Portfolio
5- Product Landing Page

✅ When I was learning HTML and CSS I've tried all of them. You can check the code here👇

✅ Responsive Website using HTML and CSS


✅Build a Responsive Grid CSS Website Layout From Scratch


✅Basic Parallax Website With HTML & CSS

Read 9 tweets
12 Jul
Mastering SEO optimization can be hard, especially if you’re just starting out.

Here's a compiled list of 7 Free SEO Tools for you.

A Thread👇
SEO tools investigate the potential of Web pages for high placement on search engine ranking pages.
They provide information on backlinks and keywords as well as insights into SEO competition on the Internet.
1️⃣ Google Search Console

Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results

Read 10 tweets
8 Jul
Resources to excel in your Tech interview.

A Thread 👇
1️⃣ Tech Interview Handbook

This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. 📎…
2️⃣ JavaScript Algorithms

This repository contains JavaScript-based examples of many popular algorithms and data structures. Algorithms and data structures implemented in JavaScript with explanations and links to further readings. 📎…
Read 11 tweets
6 Jul
9 Awesome CSS layout generators for beginners.
(Grid and Flexbox)

A Thread 👇
Grid-Based Layout Generator

1️⃣ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code. 📎
2️⃣ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want. 📎
Read 11 tweets
3 Jul
7 meta tags to improve the optimization of your site.

A Thread 👇
Why Meta tags are important?

-Meta tags are invisible tags that provide data about your page to search engines and website visitors.
-They can be optimized to highlight the most important elements of your content and make your website stand out in search results.
1️⃣ Title tag

Title tags are used by search engines to determine the subject of a page and are one of the first things that users notice in the SERPs.

Try to keep your title tag clear, descriptive, and usually not more than 55 characters.
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!