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

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

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 Android and it's features

 What is Android? Describe Android os. Write introduction of Android? Introduction of Android  Android is a mobile operating system developed by Google. It is based on a modified version of the Linux kernel and other open source software, and is designed primarily for touchscreen mobile devices such as smartphones and tablets. Android's user interface is based on direct manipulation, using touch gestures that loosely correspond to real-world actions, such as swiping, tapping and pinching, to manipulate on-screen objects, along with a virtual keyboard for text input. In addition to touchscreen devices, Google has further developed Android TV for televisions, Android Auto for cars, and Wear OS for wrist watches, each with a specialized user interface. Features of Android  Android is a mobile operating system developed by Google. It is used on a wide range of devices, including smartphones, tablets, and wearable devices. Some of the features of Android include:- Customizable...
Post a Comment
Read more