Tag: pseudo-element

How to use Pseudo Element in CSS?

by rajeshkumarCSSLeave a Comment on How to use Pseudo Element in CSS?

This is used to style specified parts of an element.

Syntax: –

selector::pseudo-element { property:value; }

Ex: –

p::first-letter { color: red; }

  • ::first-letter
  • ::first-line
  • ::selection
  • ::before
  • ::after

::first-letter-

This is used to add a style to the first letter of the specified selector (each). This can only be used with block-level elements.

  • background properties
  • font properties
  • padding properties
  • color properties
  • margin properties
  • border properties
  • line-height
  • text-transform
  • text-decoration
  • vertical-align (only if float is ‘none’)
  • float
  • clear

Ex: –

p::first-letter { color: red;}

::first-line-

This is used to add a style to the first line of the specified selector (each). This can only be used with block-level elements.

  • background properties
  • font properties
  • text-decoration
  • color properties
  • word-spacing
  • letter-spacing
  • text-transform
  • vertical-align
  • line-height
  • clear

Ex: –

p::first-line { color: red;}

::selection-

This is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.

  • background properties
  • color properties
  • cursor properties
  • outline properties

Ex: –

p::selection { background-color: red; }

::before-

This is used to insert something before the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::before { content: “ Hello World”; }

::after-

This is used to insert something after the content of each specified selector (each). We use content property to specify the content to insert.

Ex: –

p::after { content: “ Hello DevOpsSchool”; }

Tagged : / / / / / /

How to Use Pseudo-classes in CSS?

by rajeshkumarCSSLeave a Comment on How to Use Pseudo-classes in CSS?

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

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

by rajeshkumarCSSLeave a Comment on 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 : / / / / / / / / /