pseudo-class Archives - scmGalaxy https://www.scmgalaxy.com/tutorials/tag/pseudo-class/ A Platform for Software Engineers Wed, 13 Apr 2022 16:34:31 +0000 en-US hourly 1 https://wordpress.org/?v=7.1 How to Use Pseudo-classes in CSS? https://www.scmgalaxy.com/tutorials/how-to-use-pseudo-classes-in-css/ https://www.scmgalaxy.com/tutorials/how-to-use-pseudo-classes-in-css/#respond Mon, 02 Aug 2021 12:32:14 +0000 https://www.scmgalaxy.com/tutorials/?p=7270 A pseudo-class is used to define a special state of an element. Syntax:- selector:pseudo-class { property:value; } Ex: – div:hover […]

The post How to Use Pseudo-classes in CSS? appeared first on scmGalaxy.

]]> A pseudo-class is used to define a special state of an element.

Syntax:-

selector:pseudo-class { property:value; }

Ex: –

div:hover { background-color: red;}

Pseudo-classes–

  • :link
  • :visited
  • :hover
  • :active
  • :focus
  • :checked
  • :first-child
  • :first-of-type
  • :nth-child(n)

The post How to Use Pseudo-classes in CSS? appeared first on scmGalaxy.

]]> https://www.scmgalaxy.com/tutorials/how-to-use-pseudo-classes-in-css/feed/ 0 Types of Selector in CSS & How to Use CSS Selector in HTML? https://www.scmgalaxy.com/tutorials/types-of-selector-in-css-how-to-use-css-selector-in-html/ https://www.scmgalaxy.com/tutorials/types-of-selector-in-css-how-to-use-css-selector-in-html/#respond Mon, 02 Aug 2021 12:21:24 +0000 https://www.scmgalaxy.com/tutorials/?p=7248 There are five types of Selector in CSS. Simple selectors (select elements based on name, id, class) Combinator selectors (select […]

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

]]> 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>

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

]]> https://www.scmgalaxy.com/tutorials/types-of-selector-in-css-how-to-use-css-selector-in-html/feed/ 0