Chuyển tới nội dung chính
In sáchIn sách

Submodule 4.1: Selectors

Hệ thống: MightyLMS - Quản lý giáo dục
Khoá học: Web Design [CSS - Advanced HTML]
Book: Submodule 4.1: Selectors
Được in bởi: Người dùng khách
Ngày: Thứ Sáu, 15 tháng 11 2024, 12:51 PM

Mô tả

  • id 
  • Class and multiple classes 
  • specific context (ul li)
  • Group the selectors 

Table of contents

id Selector

Earlier we show that element selectors can be used to define the element at which we want to apply our styles.
However, there are additional selectors. The id is one of them.
The id selector is created by a hashtag # followed by the selector’s name. The name can be anything but it cannot start with a digit or a dash.

The id selector selects elements with a specific id attribute (name).
Thus in our CSS the id will be:

#myname { border: 2px solid black; }

And in the HTML we will have:

<p id=”myname”>

This paragraph will have a black border 

When we use id selectors?

The basic rule is that id is unique. This means that one id will only exists once in the HTML page and that each element can contain only one id.
Since ids are unique, we only use them if we want to apply a specific style in an element to distinguish it from its surroundings elements.

For example we may have 100 paragraphs to which we have applied the following style:

p { text-align:center; font-size: 1em; }

Assume that we want one of these paragraphs to displayed in italics. This can be achieved by applying an id to the specific paragraph. Thus in our CSS we will have:

#italicparagraph { font-style: italic; }

And in our HTML:

<body>
<p> </p>
………
<p id=” italicparagraph”> My italic paragraph </p>
..
<p> </p>
</body>

However, if we want more than one paragraph to displayed in italics, then id should not be used.

That being said, if you try to use id for this propose you will indeed have the desired result. However, your code will not be functional for JavaScript, as we will see later in the course.

There is an alternative selector that is appropriate for this case which is explained in the next section.

Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        #rainbowColors {background: grey}
        #red {background: red}
        #orange {background: orange}
        #yellow {background: yellow}
        #green {background: green}
        #blue {background: blue}
        #indigo {background: indigo}
        #violet {background: violet}
    </style>
  </head>
  <body>
    <ul id="rainbowColors">
        <li id="red">Red</li>
        <li id="orange">Orange</li>
        <li id="yellow">Yellow</li>
        <li id="green">Green</li>
        <li id="blue">Blue</li>
        <li id="indigo">Indigo</li>
        <li id="violet">Violet</li>
    </ul>
  </body>
</html>


will create a page displayed as:

id selector

Exercise

  1. Open your editor, create a new file and save it as exersice04.1.01.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

id selector

Solution:

Class selector

class is another type of selector. In contrast with id, class is not unique. This means that the same class can be used multiple times in an HTML page.

The class selector is created by a period . followed by the selector’s name. The class selector selects elements with a specific class attribute (name).

Thus in our CSS the class will be:

.mypadding {padding-top: 5px;}

 And in the HTML we will have: 

<p class=”mypadding”> This paragraph will have 5px padding from top </p>

Moreover, an element can have multiple classes.

Example:

<p class=”mypadding myborder mycenter myfontsize”> This paragraph has reference to four classes </p>
 When we use class selectors?

Class selectors are used when we want to apply the same style to multiple elements on our page but not to every element of the same type.

Imagine that you have a page with 100 <p> and 5 <ul> lists.

Assume that you want to apply the same style to 50 of these <p> tags and 1 <ul> list. In this case, class is the appropriate selector.

If you wanted to apply the same style to all <p> tags, then the appropriate selector would be the element selector.

 Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        .fontBlue {color:blue}
        .fontRed {color:red}
        .baclLime {background:lime}
        .backGrey {background:lightgrey}
    </style>
  </head>
  <body>
    <p class="fontBlue baclLime">My first paragraph</p>
    <p class="fontBlue backGrey">My second paragraph</p>
    <p class="fontRed baclLime">My third paragraph</p>
    <p class="fontRed backGrey">My fourth paragraph</p>
  </body>
</html>


will create a page displayed as:

 multiple classes

Exercise

  1. Open your editor, create a new file and save it as exersice04.1.02.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

multiple classes

Solution:

Apply style to a specific context (ul li)

In this section we will apply some CSS rules to unordered list and its list items.

Assume that we want our unordered list to be displayed with a square instead of circle.
There are 3 steps:

Step 1
Go to the HTML, find the <ul> list and create a class.
Example:

<ul class="squarelist">
  <li> My name is .. </li>
  <li> My surname is .. </li>
</ul>


Step 2
Go to your CSS and create your selector. Example:

.squarelist { }


Step 3
In CSS we have the property list-style-type. Since we want our list to displayed with a square, we will give this property the value square.
Example:

.squarelist { list-style-type: square;}

Now assume that we want all list items (li) of our unordered list to be green. We could do that with the class selector. However, since we want to apply this rule to any li inside a ul list, we could do it directly using the element selector.
Example:

li { color: green; }

Also, if we want to ensure that only the list items of the ul will take this style, we can write:

ul li { color: green; }
Navigation bar

Moving to practical use of ul lists, we will show some basic rules that we apply to create a navigation bar.
In general, <ul> of a navigation bar should have no bullets and browser default settings.
To remove bullets of the <ul> we should give the value none to the property list-style-type.
Example:

ul { list-style-type: none;}

To remove the browser default settings we should remove the default margin (the space around elements, outside of any defined borders) and padding (the space around elements, inside of any defined borders).
Example:

ul { list-style-type: none;
  margin: 0;
  padding:0;
}
Example

The CSS rules:

<!DOCTYPE html>
<html lang="en">
  <head>
     <style>
         .squarelist { list-style-type: square;}
         ol li { color: magenta; }
     </style>
   </head>
   <body>
     <ul class="squarelist">
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ul >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ul>
     <ol >
         <li>My name is .. </li>
         <li>My surname is .. </li>
     </ol>
   </body>
</html>

will create a page displayed as:

style to a specific context

For more information: https://www.w3schools.com/css/css_list.asp

Exercise

  1. Open your editor, create a new file and save it as exersice04.1.03.html in the folder "Exercises".
  2. Copy the above code and paste it in the new file.
  3. Modify and save the file. The browser's output should be as shown in the following image:

style to a specific context

Solution:

Group the selectors to apply styles

Assume that we want to apply the same style to different elements. For example we want all our h3, h4 and p elements to be centered aligned. With what we have learned, we would do that as follow:

h3 { text-align: center;}
h4 { text-align: center;}
p { text-align: center;}

However, there is an alternative way to do that by grouping our selectors. In this case each selector is separated from the next one by a comma (,).

By doing this we minimize the code that we have to write.

So, the above can be written as:

h1, h3, p { text-align: center;}

 

For more information about selectors: https://www.w3schools.com/css/css_syntax.asp