-1-
-2-
CSS Selectors
CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
The element Selector
The element selector selects elements based on the element name.
محددات CSS
يتم استخدام محددات CSS "للعثور" (أو تحديد) عناصر HTML بناءً على اسم العنصر والمعرف والفئة والسمة والمزيد.
محدد العنصر
يختار محدد العنصر العناصر بناءً على اسم العنصر.
The element Selector
The element selector selects elements based on the element name.
Example
You can select all <p> elements on a page like this (here, all <p> elements will be center-aligned, with a red text color):
p {
text-align: center;
color: red;}
The id Selector
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Example
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;}
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red;}
p {
text-align: center;
color: red;}
It will be better to group the selectors, to minimize the code.
To group selectors, separate each selector with a comma.
Example
In this example we have grouped the selectors from the code above:
h1, h2, p {
text-align: center;
color: red;}
-3-
-4-