How does Attribute Selector work in CSS?

We can set style using attribute or its value.

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; }

game
supergame
game-super
gamesuper
super-game
game super
super game

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”

game
supergame
game-super
gamesuper
super-game
game super
super game

Set Style whose attribute value begins with a specified value.

Syntax: –

[attribute ^= “value”] { CSS }

Ex:-

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

game
supergame
game-super
gamesuper
super-game
game super
super game

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;}

game
supergame
game-super
gamesuper
super-game
game super
super game

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

Tagged : / / / / /

How to Use child-selector in CSS?

first-child-

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.

Tagged : / / / /

Types of Selector in CSS & How to Use CSS Selector in HTML?

There are five types of Selector in CSS.

  • 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>
Tagged : / / / / / / / / /