IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES

CSS selectors identify speciﬁc HTML elements as targets for CSS styles. This topic covers how CSS selectors target HTML elements. Selectors use a wide range of over 50 selection methods opened by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns.

BASIC SELECTORS :

Selector	Description
*	Universal selector (all elements)
div	Tag selector (all elements)
.blue	Class selector (all elements with class blue)
.blue.red	All elements with class blue and red (a type of Compound selector)
ID selector	the element with “id” attribute set to headline
:pseudo-class	All elements with pseudo-class
::pseudo-element	Element that matches pseudo-element
:lang(en)	Element that matches :lang declaration, for example <span lang=”en”>
div > p	child selector

Basic selectors

Note: The value of an ID must be unique in a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree.

A complete list of selectors can be found in the CSS Selectors Level 3 speciﬁcation.

ATTRIBUTE SELECTORS

Overview

Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value.

Selector	Matched element	Selects elements…	CSS Version
[attr]	<div attr>	With attribute attr	2
[attr=’val’]	<div attr=”val”>	Where attribute attr has value val	2
[attr~=’val’]	<div attr=”val val2 val3″>	Where val appears in the	2
[attr^=’val’]	<div attr=”val1 val2″>	Where attr’s value begins with val	3
[attr$=’val’]	<div attr=”sth aval”>	Where the attr’s value ends with val	3
[attr*=’val’]	<div attr=”somevalhere”>	Where attr contains val anywhere Where attr’s value is exactly val	3
[attr\|=’val’]	<div attr=”val-sth etc”>	followed by – (U+002D) or starts with val and immediately	2
[attr=’val’ i]	<div attr=”val”>	Where attr has value val,ignoring val’s letter casing	4[2]

Attribute selectors

Notes:

The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also work, but it’s not valid according to the CSS standard, and is discouraged.
There is no single, integrated CSS4 speciﬁcation, because it is split into separate modules. However, there are “level 4” modules. See browser support.

PSEUDO-CLASSES

Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or that cannot be expressed by other selectors or combinators. This information can be associated to a certain state (state and dynamic pseudo-classes), to locations (structural and target pseudo-classes), to negations of the former (negation pseudo-class) or to languages (lang pseudo-class). Examples include whether or not a link has been followed (:visited), the mouse is over an element (:hover), a checkbox is checked (:checked), etc.

Syntax

selector:pseudo-class { 
         property: VALUE;
}

List of pseudo-classes:

Name	Description
:active	Applies to any element being activated (i.e. clicked) by the user.
:any	Allows you to build sets of related selectors by creating groups that the included items will match. This is an alternative to repeating an entire selector.
:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:checked	Applies to radio, checkbox, or option elements that are checked or toggled into an “on” state.
:default	Represents any user interface element that is the default among a group of similar elements.
:disabled	Applies to any UI element which is in a disabled state.
:empty	Applies to any element which has no children.
:enabled	Applies to any UI element which is in an enabled state.
:first	Used in conjunction with the @page rule, this selects the ﬁrst page in a printed document.
:first-child	Represents any element that is the ﬁrst child element of its parent.
:first-of-type	Applies when an element is the ﬁrst of the selected element type inside its parent. This may or may not be the ﬁrst-child.
:focus	Applies to any element which has the user’s focus. This can be given by the user’s keyboard, mouse events, or other forms of input.
:focus-within	Can be used to highlight a whole section when one element inside it is focused. It matches any element that the :focus pseudo-class matches or that has a descendant focused.
:full-screen	Applies to any element displayed in full-screen mode. It selects the whole stack of elements and not just the top level element.
:hover	Applies to any element being hovered by the user’s pointing device, but not activated.
:indeterminate	Applies radio or checkbox UI elements which are neither checked nor unchecked, but are in an indeterminate state. This can be due to an element’s attribute or DOM manipulation.
:in-range	The :in-range CSS pseudo-class matches when an element has its value attribute inside the speciﬁed range limitations for this element. It allows the page to give a feedback that the value currently deﬁned using the element is inside the range limits.
:invalid	Applies to elements whose values are invalid according to the type speciﬁed in the type= attribute.
:lang	Applies to any element who’s wrapping element has a properly designated lang= attribute. For the pseudo-class to be valid, it must contain a valid two or three letter language code.
:last-child	Represents any element that is the last child element of its parent.
:last-of-type	Applies when an element is the last of the selected element type inside its parent. This may or may not be the last-child.
:read-only	Applies to any element which is not editable by the user.
:read-write	Applies to any element that is editable by a user, such as elements.
:right	Used in conjunction with the @page rule, this selects all the right pages in a printed document.
:root	matches the root element of a tree representing the document.
:scope	CSS pseudo-class matches the elements that are a reference point for selectors to match against.
:target	Selects the current active #news element (clicked on a URL containing that anchor name)
:left	Used in conjunction with the @page rule, this selects all the left pages in a printed document.
:link	Applies to any links which haven’t been visited by the user.
:visited	Applies to any links which have has been visited by the user.

Pseudo-classes




This topic is Describle with Example completely Follow this link Identify css Selector.

CLASS NAME SELECTORS

The class name selector select all elements with the targeted class name. For example, the class name .warning would select the following element:

<div class="warning">
        <p>This would be some warning copy.</p>
</div>

You can also combine class names to target elements more speciﬁcally. Let’s build on the example above to showcase a more complicated class selection.

CSS

.important {
color: orange;
}
.warning {
color: blue;
}
.warning.important {
color: red;
}

HTML

<div class="warning">
<p>This would be some warning copy.</p>
</div>

<div class="important warning">
<p class="important">This is some really important warning copy.</p>
</div>

In this example, all elements with the .warning class will have a blue text color, elements with the .important class with have an orange text color, and all elements that have both the .important and .warning class name will have a red text color.
Notice that within the CSS, the .warning.important declaration did not have any spaces between the two class names. This means it will only ﬁnd elements which contain both class names warning and important in their class attribute. Those class names could be in any order on the element.
If a space was included between the two classes in the CSS declaration, it would only select elements that have parent elements with a .warning class names and child elements with .important class names.

SELECT ELEMENT USING ITS ID WITHOUT THE HIGH SPECIFICITY OF THE ID SELECTO

This trick helps you select an element using the ID as a value for an attribute selector to avoid the high speciﬁcity of the ID selector.

HTML

<div id="element">...</div>

CSS

#element { ... } /*  High  SPECIFICITY  will  override  many  SELECTORS  */

[id="element"] { ... } /*  Low  SPECIFICITY,  can  be  overridden  EASILY  */

THE :LAST-OF-TYPE SELECTOR

The :last-of-type selects the element that is the last child, of a particular type, of its parent. In the example below, the css selects the last paragraph and the last heading h1

p:last-of-type {
background: #C5CAE9;
}
h1:last-of-type {
background: #CDDC39;
}

<div class="container">
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Last paragraph</p>
<h1>Heading 1</h1>
<h2>First heading 2</h2>
<h2>Last heading 2</h2>
</div>

CSS3 :IN-RANGE SELECTOR EXAMPLE

<style>
input:in-range {
border: 1px solid blue;
}
</style>

<input type="number" min="10" max="20" value="15">
<p>The border for this value will be blue</p>

The :in-range CSS pseudo-class matches when an element has its value attribute inside the speciﬁed range limitations for this element. It allows the page to give a feedback that the value currently deﬁned using the element is inside the range limits

A. THE :NOT PSEUDO-CLASS EXAMPLE & B. :FOCUS- WITHIN CSS PSEUDO-CLASS

A. The syntax is presented above.

The following selector matches all <input>elements in an HTML document that are not disabled and don’t have the class .

example: HTML

<form>
Phone: <input type="tel" class="example">
E-mail: <input type="email" disabled="disabled"> Password: <input type="password">
</form>

CSS

input:not([disabled]):not(.example){
background-color: #ccc;
}
input:not([disabled], .example){
background-color: #ccc;
}

The :not() pseudo-class will also support comma-separated selectors in Selectors Level 4: CSS

B. The :focus-within CSS pseudo-class

div {
height: 80px;
}
input{
margin:30px;
}
div:focus-within {
background-color: #1565C0;
}


ID SELECTORS

ID selectors select DOM elements with the targeted ID. To select an element by a speciﬁc ID in CSS, the # preﬁx is used. For example, the following HTML div element
<div id="exampleID">
<p>Example</p>
</div>


#exampleID in CSS as shown below:
#exampleID {
width: 20px;
}


Note: The HTML specs do not allow multiple elements with the same ID




This topic is Describle with Example completely Follow this link Identify css Selector.




you want to learn

CSS & HTML 

and Many more with Example

follow 

Tutorialpoints.in

IDENTIFY CSS SELECTORS AND IMPORTANT ATTRIBUTES