CSS Selectors | Cascading Style Sheets

CSS Selectors | Cascading Style Sheets

CSS Selectors is the Cascading Style Sheet that’s used for the layout of the web. That can represent the style of multiple pages in different ways like CSS Selectors.

CSS helps web browsers to create a beautiful web site and web page also. That’s changing the structure of web site as beauty. So, it’s more important for user engagement. 

There are many key features for CSS. That helps to build an amazing website by simply adding some important selectors such as element selectors, class selectors, id selectors, etc.

That has three main types such as External CSS, Internal CSS, Inline CSS, etc.

External CSS is required when we to use that’s the same code in another place. You can use this code to use the same layout on different pages.

<link rel=”style sheet” type=”text/CSS” href=”path.css”/>

You can simply add these codes in a different place when you want to use the same layout on other pages.

The Inline CSS helps to create a CSS code in HTML (Hypertext Markup Language) format such as

CSS Selectors | Cascading Style Sheets

The Internal CSS is the same as Inline CSS but it is in CSS format such as

These are the best when we using CSS coding to build any web pages or web site also. CSS is much helpful for mobile-friendly and desktop-friendly web design. You can see here some important CSS Selectors helps to make innovative web design. See below

CSS Selectors | Cascading Style Sheets

CSS SELECTORS

The CSS SELECTOR is essential to develop some best design parts for the web site. A CSS SELECTOR declares DOM (Document Object Model) applied to a particular style. You can see more as given below. So, be continue

ID SELECTOR:-  which will apply specific task to element like ‘#’ is uses to declare the id selector. You can use # tage only one time for web page. For example

CSS Selectors | Cascading Style Sheets

CLASS SELECTOR:- It is possible when sometimes you need to make several styles for the same HTML element. It is also known as CSS Class Selector.

CSS Selectors | Cascading Style Sheets

PSEUDO SELECTORS

:foo – indicates a pseudo-class (temporary state not in the DOM)

:hover – applies only when hovering over an element

:first-child – the first child of an element can change

USER ACTION PSEUDO-CLASS SELECTORS

:active – element is currently being activated by the user

Mouse: time between mouse press & release

Keyboard: hold down enter

Often used on <a> & <button>

:focus – element is currently selected to receive input

Mouse: object selected (<input> or <textarea>)

Keyboard: tab to object (usually indicated via dotted or solid outline)

TREE – STRUCTURAL PSEUDO – CLASS SELECTORS

:root – Represents the element that is the root of the document

In HTML, this is always <html>, why does :root exist?

Remember, CSS can also be used in SVG & XML (graphics element)

:root is equivalent to <html> in CSS, except that :root has higher specificity

:empty – matches elements that have no children (children means elements or text)

:empty matches <td>and</td>. So, you could apply styles to an empty table cell.

It also matches empty elements like <img>, <input>, & <hr>

TREE STRUCTURAL: CSS SELECTORS CHILD

CSS Selectors | Cascading Style Sheets

:first-child:- selects the element that is the first child of a parent

For example p:first-child means a first <p> of all parent elements, not the first child of <p>

:last-child:- selects the element that is the last child of a parent

For example p:last-child means a last <p> of all parent elements, not the last child of <p>

:only-child:- selects the element that is the only child of a parent

For example p:only-child means a <p> that is the only child of its parent elements, not the only child of <p>

:nth-child (n):- Rendering engine counts all children of an element & then matches based on the selector.

:nth-last-child (n):- Rendering engine counts all children of an element & then matches based on the selector.

tr:nth-child (odd):- matches the odd rows of a table.

tr:nth-child (even):- matches the even rows of a table.

tr:nth-child (1):- matches the 1st row of a table, same as the:first-child selector

Also same as tr :nth-child(0n+1)

n starts with 0 & increments up by 1

if n=0, then 0x0+1=1, the 1st row

if n=1, then 0x1+1=1, the 1st row

if n=2, then 0x2+1=1, the 1st row

& so on

tr :nth-child (2n+1)

matches the odd rows of a table

if n=0, then 2×0+1=1, the 1st row

if n=1. then 2×1+1=3, the 3rd row

if n=2, then 2×2+1=5, the 5th row

tr:nth-child (2n)

matches the even rows of a table

if n=0, then 2×0=0, which is no row

if n=1, then 2×1=2, the 2nd row

if n=2, then 2×2=4, the 4th row

tr: nth-child(-n+3)

matches the 1st 3 rows of a table

INPUT PSEUDO – CLASS SELECTORS

CSS Selectors | Cascading Style Sheets

: enabled – that enables data on a web page. But we can’t use: enabled many times.

: disabled – we can use the disabled CSS attribute selectors in HTML to disable any field data.

: checked – indicates that these elements are checked or toggled on:

radio (<input type=”radio”>)

checkbox (<input type=”checkbox”>)

option (<option> in a <select>)

NEGATION PSEUDO – CLASS SELECTOR

CSS Selectors | Cascading Style Sheets

: not (s) – Matches any element not represented by s

S cannot contain another negation selector or any pseudo-elements

:lang() PSEUDO – CLASS SELECTOR

Select elements based on language encoding

Every language has a 2-letter encoding + (optionally) a dash & 2 more letters for directs. For example:- fr= French, zh=Chinese, en=English, en-US = American English

<p lang=”fr”>

FULLSCREEN API (APPLICATION PROGRAMMING INTERFACE)

: fullscreen:-

Pseudo-class that targets elements displayed in full-screen mode via javascript. It doesn’t work if you fully maximize your browser’s window via F11 on Windows or MAC OS (Media Access Controller Operating System).

PSEUDO-ELEMENTS

:foo:- Indicates a pseudo-class (temporary state not in the DOM (Document Object Model)). it was used for both pseudos – classes and pseudo-element. For pseudo-elements but most rendering engines supported.

::first-line PSEUDO-ELEMENT SELECTOR

<string> Data Type:-

Data types specify which kinds of values are allowed for CSS properties

<string>:- represents a quoted string of Unicode characters. Quotation marks can be either “foobar” or ‘foobar’. That used with data URLs such as:: before and:: after.

::before – selects elements & inserts content before it. Content can be text, images, or counters. Used to be: before, & most rendering engines support both. It must include the content property.

That’s nice, what if you have several chapters?. You don’t want to put the chapter number in manually for each one.

Counters are CSS variables that may be incremented or decremented based on their position in the document. For counter work: You must give the counter a unique name. You must use counter(), counter-reset, & counter-increment.

counter():- function that adds the value of a counter to a selected element

CSS Selectors | Cascading Style Sheets

counter-reset:- resets the value of a CSS counter. The default value is 0 always if the value isn’t specified.

/* set foo to 0 */

counter-reset : foo

/* set foo to -1 */

counter-reset : foo -1

/* set foo to 1 & bar to 10 */

Counter-reset :- foo 1 bar 10

Counter-increment :- Increases the value of a CSS counter by a given value. The default value is 1 if the value isn’t specified.

/* Increment foo by 1 */

counter-increment : foo

/* Decrement foo by 1 */

counter-increment: foo -1

/* Increment foo by 1 & decrement bar by 10 */

counter-increment: foo bar -10

COMBINATOR

selector A selector B :- selects any selector B who has selector A as an ancestor. selector B can be child, grandchild, or later CSS descendant selector of selector A. Any other selector B is unaffected.

CSS Sibling Selector:- two or more elements that shared parent class.

Child Combinator

selector A > selector B:-

selects any selector B who is a direct child of selector A, not a grandchild or any other descendant. All siblings who are direct children of selector A are selected.

Contrasts with the descendant combinator, which selects both direct children & any descendants, no matter how deep.

Google FAQ’s

What Are The CSS Selectors?

CSS Selectors is the style of CSS to change the layout of the web page.

What Are The Different Kinds Of CSS Selectors?

There are so many selectors such as id selectors, class selectors, pseudo selectors, etc.

How Many Selectors Are There?

can not mention properly. But I know 3 selectors which I showed above.

What Is CSS Selectors And How Does It Work?

A CSS selector provides the layout information to HTML tags which are used to formatting webpages. I already explained that in the first paragraph.

What Are Selectors?

Selectors are essential for proving a major role in CSS layout. That indicates the HTML tags to formatting according to these.

Conclusion

CSS has many styles to create a beautiful design. Every time CSS helps to build effective web pages for user prospects. So, that’s much helpful for users and developers also.

There are many selectors to develop a beautiful web site. Also, the developer’s making much easier to develop a new style of CSS.

Some time accidental codes not works on the web page. So, That’s must have used to appreciate coding for web site development. The accidental may have in HTML codes between CSS codes.

You can see here more keyword blogs

Professional Developer

Binary | Is That Possible Coding In Binary?

Neural Network

CSS Cheat Sheet

Deep Learning Versus Machine Learning

Artificial Intelligence In Medical Field

Leave a Comment