CSS Selectors

• Element selector : Targets elements based on their tag name. For example, the selector ' p ' selects all ' <p> ' elements.
• Class selector : Targets elements with a specific class attribute. It uses the dot notation. For example, the selector
  ' my-class ' selects all elements with ' class="my-class" '.
• ID selector : Targets an element with a specific ID attribute. It uses the hash notation. For example, the selector
  ' #my-id ' selects the element with ' id="my-id" '.
• Descendant selector : Targets elements that are descendants of another element. It uses whitespace to separate the selectors.For example, the selector div ' p ' selects all ' <p> ' elements that are inside a ' <div> '.
• Child selector : Targets elements that are direct children of another element. It uses the ' > ' symbol. For example, the selector ' div > p ' selects all ' <p> ' elements that are immediate children of a ' <div> '.
• Attribute selector : Targets elements based on their attribute values. For example, the selector ' [type="text"] ' selects all elements with ' type="text" '.

• Step 1 : Open the html editor and locate the target element. For this example, let's consider a <h1> Test </h1> heading element.
• Step 2 : In the CSS code area, use the element selector followed by the desired styling property. For instance:

Edit Copy Hide

h1 {
  color: red;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The <h1> heading text will be displayed in red.
Test

• Step 1 : In the html editor , add a class attribute to the target element. For example,
  <p class="my-paragraph"> Hello, world! </p>
• Step 2 : In the CSS code area, use the class selector preceded by a dot and the class name. For instance:

Edit Copy Hide

.my-paragraph {
  font-size: 20px;
  color: blue;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The targeted paragraph with the class "my-paragraph" will have a font size of 20 pixels and blue text color.

• Step 1 : In the html editor , assign an ID attribute to the target element. For example,
  <div id="my-div"> Content </div>
• Step 2 : In the CSS code area, use the ID selector preceded by a hash and the ID name. For instance:

Edit Copy Hide

#my-div {
  background-color: yellow;
  padding: 10px;
}

• Step 3 : Paste the css style to your HTML document.
• Result : The targeted <div> with the ID "my-div" will have a yellow background color and 10 pixels of padding.

• Step 1 :In the html editor , Identify a parent element and its descendant element(s) in your HTML. For example,
  <div> contains a <p> element:
  <div>
  <p>Text</p>
  </div>
• Step 2 : In the CSS code area, use the descendant selector with a space between the parent and descendant element. For instance:

Edit Copy Hide

div p {
  font-weight: bold;
}

• Step 3 : Paste the css style to your HTML document.
• Result : All <p> elements inside a <div> will have bold font weight.

• Step 1 : In the html editor , Identify a parent element and its immediate child element(s) in your HTML. For example, <ul> contains <li> elements :
  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  </ul>
• Step 2 : In the CSS code area, use the child selector with a greater-than symbol between the parent and child elements. For instance:

Edit Copy Hide

ul > li {
  color: red;
}

• Step 3 : Paste the css style to your HTML document.
• Result : Only the immediate <li> children of <ul> will have red text color.

• Step 1 : In the html editor , Identify the element with the desired attribute. Let's consider <input type="text"> elements with a type attribute.
• Step 2 : In your CSS code area, use the attribute selector with the attribute name and value in brackets. For example, let's target <input> elements with type="text":

Edit Copy Hide

input[type="text"] {
  border: 5px solid gray;
  padding: 5px;
}

• Step 3 : Paste the css style to your HTML document.
• Result : All <input> elements with type="text" will have a gray solid border with 5-pixel width and 5 pixels of padding.