CSS Selectors

CSS Selectors

Mission CSS selectors learning........

Table of contents

No heading

No headings in the article.

The description on CSS selectors...

CSS stands for Cascading Style Sheet. It is used to give makeovers for our HTML language. Well HTML is part of the body while CSS is the skeleton of the body. In real life without our skin, we can not look nice. It is one kind of style sheet language. It gives colors, font, border, style, and layout. In addition to that, For making a website we need to keep HTML, CSS, and JavaScript altogether...

Moreover, It has 3 types of CSS

  1. Inline CSS:

In this CSS type, We can apply CSS to every single HTML element. For example, we need to open the tag and give CSS inside the HTML tag.

  1. Internal CSS:

In this CSS type, We can write CSS after the head tag. We can use it in small kinds of a work projects. Because if we are using in Big website so it may create a mess. Also, we can not find mistakes easily because HTML and CSS both are on one page.

  1. External CSS:

In this CSS type, we need to keep the CSS file separate rather than write CSS in the HTML page. we need to put a Link after the head section inside the style tag. Because we have to attach CSS files in HTML.

CSS SELECTORS...

  1. Universal selector:

With the help of this selector, we can select only one element to give CSS for the entire part of the work. For example inside the body section. We can be denoted by universal selectors as the *(asterisk) symbol.

Screenshot_20221127_112416.png

  1. Individual Selector:

Individual selectors mean we have to target a particular element to give CSS. For example, If we need to give CSS on the entire paragraph. so we can write only the p element in the style tag.

Screenshot_20221127_112452.png

Screenshot_20221127_112434.png

  1. Class and ID selector:

In this selector, we have to define a class name and id name in the HTML section. Both have a unique sign to identify the class and ID selector.

Screenshot_20221127_112510.png

  1. And Selector(chained):

In the Chained selector, we can target all elements via a=both class name using and selector.

Screenshot_20221127_113130.png

  1. Combined Selector:

In this selector, we can combine two target selectors of different elements to give Style at the same time.

Screenshot_20221127_112801.png

  1. Inside selector:

    This is used to select an element inside the element. For example first class is div, p then ul, and li. so we can keep the target to ul, li element.

Screenshot_20221127_112815.png

  1. Direct child:

Well, this is a little bit tricky to understand. As an example, if we have one class is div and then the p tag after that ul and li tag. But we need to give CSS only the ul tag of div so that time we can use it. It is denoted by (>).

Screenshot_20221127_112836.png

  1. .sibling ~ or +:

    In this selector, we can target an element after the second element of a specific class.

Screenshot_20221127_112845.png

Output:

Screenshot_20221127_113758.png

pseudo selector

:: before and ::after pseudo selector:

In this selector, First of all before the selector, it means that is the first child of the selected element and After the selector, it means that is the last child of the selected element. There is important thing is, we have to write content as an attribute inside this selector.

Screenshot_20221127_114409.png

Screenshot_20221127_114518.png

Summarize:

In this article, we can give focus on CSS selectors to make a website very easy and attractive. Also My main is to learn new for beginners and memorize all selectors