Skip to main content

SELECTOR IN CSS

Selector In CSS


Hello guys today we discuss about css selector:

CSS selectors are the patterns used to "select" the HTML elements you want to style. They are the fundamental link between your HTML structure and your CSS rules.
Here is a breakdown of the most common types of selectors, ranging from simple to complex.

1. Basic Selectors

These are the most common ways to target elements.
   Selects all elements on the page.
   * {
  box-sizing: border-box;
}

   Selects all elements of a specific HTML tag name.
   p {
  color: blue; 
}

   Selects all elements that have a specific class attribute. This is the most versatile selector.
   .button {
  background-color: red; 
}

 * ID Selector (#)
   Selects a single element with a specific unique ID.
   #header {
  height: 100px; 
}

2. Grouping Selector

If multiple elements share the same style, you can group them with a comma to save space.
h1, h2, p {
  font-family: Arial, sans-serif;
}

3. Combinators

These selectors target elements based on their relationship to other elements in the HTML structure.
   Selects an element that is nested anywhere inside a specified element.
   div p {
  color: green; 
}

   Selects an element that is a direct child of a specified element (no levels in between).
   ul > li {
  list-style: none; 
}

   Selects an element that comes immediately after another specific element.
   h1 + p {
  margin-top: 0; 
}

4. Pseudo-classes (:)

These select elements based on a specific state.
  :hover – When the user mouses over an element.
  :focus – When an element is selected (like clicking into an input field).
  :nth-child() – Selects elements based on their position in a list.

  text-decoration: underline;
}

li:nth-child(2) {
  color: red; 
}

5. Pseudo-elements (::)

These style a specific part of an element.
 ::before – Inserts content before the element's content.
 ::after – Inserts content after the element's content.
 ::first-line – Styles only the first line of text.

p::first-line {
  font-weight: bold;
}

Selects elements based on the presence or value of an attribute (like type, href, src, etc.).
 Targets input fields where type="text" 
input[type="text"] {
  border: 1px solid gray;
}

 Targets links that contain ".pdf"
a[href$=".pdf"] {
  color: red;
}

When multiple selectors target the same element, the browser uses Specificity to decide which rule wins. generally:
IDs > Classes > Tags
For example, if you have .red-text { color: red; } and p { color: blue; },
 a paragraph with that class will be red because a class is more specific than a tag.

Comments

Post a Comment

Popular posts from this blog

How to create a table in html

  Hello dosto 🙏🙏 Aaj ham dekhenge ki kaise html Me table create karte hai . Create A Table In Html: Html me table create karne ke liye  for example ham student name ki table banayenge:- <!DOCTYPE html> <html> <head> <Title>Creating a table</title> </head> <body> <table border="1" cellspacing="0"> <tr> <tr>student table</tr> <th>name</th> <th>class</th> <th>address</th> </tr> <tr> <td>ram</td> <td>bca</td> <td>rampur</td> </tr> </tr> </table> </body> </Html> Coding karne ke baad apka Student name ki table ban Jati hai If this information is helpful, To aisi hi coding sekhna chahte to neeche comments kare Thanks 
3 comments
Read more

Introduction of php and it's features

 what is php ? what is features of php language? Introduction of PHP  PHP is a server site scripting language. which we use to create a dynamic  content, website  and web application.  PHP language is develop by Rasmus Lerdorf in 1994. In this time, PHP is a most popular scripting language. Most popular website as facebook and yahoo developed by php language. Features of PHP Php is a most popular and secondary used for world wide scripting language. there are many features of php language:- simple and easy to learn open source error reporting faster case sensitive loosely type language independent plateform Simple And easy to learn PHP is a very simple to use read and write.PHP language understandable and user-friendly. user and developer easily identify PHP code. Interpreted language PHP is an interpreted language, which means there is no need for compilation. Interpreters run through a program line by line and execute the code. PHP language no need of compiler...
3 comments
Read more

HTML

HTML  HTML (HyperText Markup Language) is a standard markup language used to creat web pages. It is the foundation of most websites and is used to structure and format the content of a web page, including text, images, and other media. HTML is a very simple language that consists of a set of tags enclosed in angle brackets. These tags tell the web browser how to format and display the content of a web page. Here is a simple example of an HTML document: <html>    <head>       <title>My blog Page</title>    </head>    <body>       <h1>Welcome to my blog</h1>    </body> </html> In this example, the html element is the root element of the HTML document and it contains the 'head' and 'body' elements. The 'head' element contains information about the document, such as the title, and the 'body' element contains the content of the document.
Post a Comment
Read more