<(?:[^>"']|"[^"]*"|'[^']*')+?\sid\s*=\s*("[^"]*"|'[^']*')↵
(?:[^>"']|"[^"]*"|'[^']*')*>

In free-spacing mode:

<
(?: [^>"']             # Tag and attribute names, etc.
  | "[^"]*"            #   and quoted attribute values
  | '[^']*'
)+?
\s id                  # The target attribute name, as a whole word
\s* = \s*              # Attribute name-value delimiter
( "[^"]*" | '[^']*' )  # Capture the attribute value to backreference 1
(?: [^>"']             # Any remaining characters
  | "[^"]*"            #   and quoted attribute values
  | '[^']*'
)*
>

This regex captures the id attribute’s value and surrounding quote marks to backreference 1. This allows you to use the value in code outside of the regex or in a replacement string. If you don’t need to reuse the value, you can switch to a noncapturing group or replace the entire ‹\s*=\s*("[^"]*"|'[^']*')› sequence with ‹\b›. The remainder of the regex will pick up the slack and match the id attribute’s value.

<div\s(?:[^>"']|"[^"]*"|'[^']*')*?\bid\s*=\s*("[^"]*"|'[^']*')↵
(?:[^>"']|"[^"]*"|'[^']*')*>

Here is the same thing in free-spacing mode:

<div \s                # Tag name and following whitespace character
(?: [^>"']             # Tag and attribute names, etc.
  | "[^"]*"            #   and quoted attribute values
  | '[^']*'
)*?
\b id                  # The target attribute name, as a whole word
\s* = \s*              # Attribute name-value delimiter
( "[^"]*" | '[^']*' )  # Capture the attribute value to backreference 1
(?: [^>"']             # Any remaining characters
  | "[^"]*"            #   and quoted attribute values
  | '[^']*'
)*
>

<(?:[^>"']|"[^"]*"|'[^']*')+?\sid\s*=\s*(?:"my-id"|'my-id')↵
(?:[^>"']|"[^"]*"|'[^']*')*>

And the free-spacing version:

<
(?: [^>"']     # Tag and attribute names, etc.
  | "[^"]*"    #   and quoted attribute values
  | '[^']*'
)+?
\s id          # The target attribute name, as a whole word
\s* = \s*      # Attribute name-value delimiter
(?: "my-id"    # The target attribute value
  | 'my-id' )  #   surrounded by single or double quotes
(?: [^>"']     # Any remaining characters
  | "[^"]*"    #   and quoted attribute values
  | '[^']*'
)*
>

Going back to the ‹(?:"my-id"|'my-id')› subpattern for a second, you could alternatively avoid repeating “my-id” (at the cost of some efficiency) by using ‹(["'])my-id\1›. That uses a capturing group and backreference to ensure that the value starts and ends with the same type of quote mark.

<(?:[^>"']|"[^"]*"|'[^']*')+>

Next, follow the code in Recipe 3.13 to search within each match for a class attribute using the following regex:

^(?:[^>"']|"[^"]*"|'[^']*')+?\sclass\s*=\s*("[^"]*"|'[^']*')

This captures the entire class value and its surrounding quote marks to backreference 1. Everything before the class attribute is matched using ‹^(?:[^>"']|"[^"]*"|'[^']*')+?›, which matches quoted values in single steps to avoid finding the word “class” inside another attribute’s value. On the right side of the pattern, the match ends as soon as we reach the end of the class attribute’s value. Nothing after that is relevant to our search, so there’s no reason to match all the way to the end of the tag within which we’re searching.

The caret at the beginning of the regex anchors it to the start of the subject string. This doesn’t change what is matched, but it’s there so that if the regex engine can’t find a match starting at the beginning of the string, it doesn’t try again (and inevitably fail) at each subsequent character position.

Finally, if both of the previous regexes found matches, use the following pattern to search within backreference 1 of each match found by the second regex:

["'\s]my-class["'\s]

Since classes are separated by whitespace, my-class must be bordered on both ends by either whitespace or a quote mark. If it weren’t for the fact that class names can include hyphens, you could use word boundary tokens instead of the two character classes here. However, hyphens create word boundaries, and thus ‹\bmy-class\b› would match within not-my-class.