Set Style using attribute : –

Syntax: –

Selector [attribute] { CSS ;}

Ex: –

div [id] { color: red; }

Set style using attribute and its value: –

Syntax: –

Selector [attribute = “value”] {  CSS  }

Ex: –

div[id=“data”] { color: red; }

Set Style using an attribute value containing a specified word.

Syntax: –

[attribute ~= “value”] { CSS }

Ex:-

[class ~= “game”] { color: red; }

Set Style using with the specified attribute starting with the specified value.

Syntax: –

[attribute |= “value”] { CSS }

Ex:-

[class |= “game”] {color: red;}

The value must be a whole word.

Ex: –

“game” or “game-super”

Set Style whose attribute value begins with a specified value.

Syntax: –

[attribute ^= “value”] { CSS }

Ex:-

[class ^= “game”] {color: red;}

It is not necessary that the value should be a whole word.

Set Style whose attribute value ends with a specified value.

Syntax: –

[attribute $= “value”] { CSS }

Ex:-

[class $= “game”] {color: red;}

It is not necessary that the value should be a whole word.

The post How does Attribute Selector work in CSS? appeared first on scmGalaxy.

This will set CSS rule to every first element of selector which is someone’s child. 

last-child-

This will set CSS rule to every last element of selector which is someone’s child. 

first-of-type-

This will set CSS rule to every first selector type of element.

last-of-type-

This will set CSS rule to every last selector type of element.

The post How to Use child-selector in CSS? appeared first on scmGalaxy.

• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector–

• ID
• Class
• Element

Id Selector–

<html>
	<head>
		<style>
		          #id_selector {
			              color: red; font-size: 60px;
			         }
		</style>
	</head>
	<body>
		<p id="id_selector">Hello World!</p>
		<p>This paragraph is not affected by the style.</p>
	</body>
</html>

Class Selector–

Universal-

<html>
	<head>
		<style>
			.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Element Specific-

<html>
	<head>
		<style>
			p.red {color: #FF0000; font-size: 60px;}
		</style> 
	</head>
	<body>
	            <h2 class="red">I am Heading</h2>
	            <p class ="red">I am first paragraph</p>
	            <p>I am second paragraph</p>
	</body>
</html>

Use Two or more class–

<html>
	<head>
		<style>
			p.red {color: #FF0000;}
			p.look{font-size: 60px;}
			.algn{text-align: center;}
		</style> 
	</head>
	<body>
	                    <h2 class="algn">I am Heading</h2>
	                    <p class ="red look">I am first paragraph</p>
	                    <p class="red algn">I am second paragraph</p>
	</body>
</html>

The post Types of Selector in CSS & How to Use CSS Selector in HTML? appeared first on scmGalaxy.