lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

pythonIntroCrawlingChapter1Title

pythonIntroCrawlingChapter2Title

pythonIntroCrawlingChapter3Title

pythonIntroCrawlingChapter4Title

from bs4 import BeautifulSoup

# Store HTML code as a string variable
html = """
<html>
  <body>
    <div id="wrap">
      <h1 class="title">h1</h1>
      <p class="content">paragraph 1</p>
      <p class="content">paragraph 2</p>
    </div>
  </body>
</html>
"""

# Save BeautifulSoup object to the variable soup
soup = BeautifulSoup(html, 'html.parser')

# Use soup.select to select all elements with the class name "content"
content_elements = soup.select('.content')

# Output the 2 p elements with the content class
print(content_elements)

# What is CSS?

`CSS (Cascading Style Sheets)` acts as the **clothing** of a web page, specifying its layout, colors, fonts, and overall design.

<br />

`CSS Selectors` are patterns used to select specific elements within an HTML document composed of multiple elements.

In web crawling, CSS selectors help quickly identify and extract relevant HTML elements.

<br />

## Basic CSS Selectors

### 1. Element Selector
  - Selects elements based on their HTML tag name.

  - Example: The `p` selector applies styles to all `<p>` elements.
  ```html title="HTML: paragraph 1, paragraph 2"
  <p>paragraph 1</p>
  <p>paragraph 2</p>
  ```

  ```css title="CSS: select paragraph 1, paragraph 2"
  p {
    color: blue;
  }
  ```

<br />

### 2. Class Selector
  - Uses `.` to select elements with a specific class

  - Example: The `.classname` selector selects all elements that has the class name "classname".
  ```html title="HTML: Two p elements with class name classname"
  <p class="classname">paragraph 1</p>
  <p class="classname">paragraph 2</p>
  ```

  ```css title="CSS"
  .classname {
    background-color: yellow;
  }
  ```

<br />

### 3. ID Selector
  - Uses `#` to select elements with a specific ID.

  - Example: The `#idname` selector selects the element with the ID "idname".
  ```html title="HTML: A p element with ID idname"
  <p id="idname">paragraph 1</p>
  ```
  
  ```css title="CSS: select element with ID idname"
  #idname {
    font-size: 24px;
  }
  ```

<br />

### 4. Attribute Selector
  - Uses `[attribute=value]` to select elements with a specific attribute.

  - Example: The `[type="text"]` selector selects all elements with the `type="text"` attribute.
  ```html title="HTML: input element with type attribute text"
  <input type="text">
  ```

  ```css title="CSS: select input elements with type attribute text"
  input[type='text'] {
    border: 1px solid black;
  }
  ```

<br />

## Advanced CSS Selectors

### 1. Descendant Selector
  - Selects elements nested within a specified parent element.

  - Example: `div p` selects all `<p>` elements inside `<div>`.
  ```html title="HTML: 2 p elements within div"
  <div>
    <p>paragraph 1</p>
    <p>paragraph 2</p>
  </div>

  <p>paragraph 3</p>
  ```

  ```css title="CSS: do not select paragraph 3"
  div p {
    color: red; 
  }
  ```

<br />

### 2. Child Selector
  - Uses `>` to select only direct child elements of a specified element.

  - Example: `ul > li` selects only the direct child `<li>` elements of `<ul>`.

  ```html title="HTML: 2 direct child li elements within ul"
  <ul>
    <li>list 1</li>
    <li>list 2</li>
  </ul>
  ```

  ```css title="CSS: select list 1, list 2"
  ul > li {
    color: green;
  }
  ```

<br />

## Applying CSS Selectors in BeautifulSoup

In the BeautifulSoup library, CSS selectors can be used with the `soup.select` method.

```python title="Example of using CSS selectors in BeautifulSoup"
from bs4 import BeautifulSoup

html = """
<html>
  <body>
    <div id="wrap">
      <h1 class="title">h1</h1>
      <p class="content">paragraph 1</p>
      <p class="content">paragraph 2</p>
    </div>
  </body>
</html>
"""

soup = BeautifulSoup(html, 'html.parser')

# Select all elements with the class name "content"
content_elements = soup.select('.content')
print(content_elements)
```

<br />

For more detailed content on CSS, visit the <a href="https://www.codefriends.net/courses/web-intro-css" target="_blank">Intro to CSS Course</a>.

<br />

## Practice

Click the _`Run Code`_ button on the right-hand side of the screen to view crawling results or edit the code!

python_execution