diff --git a/src/css/libdom.zig b/src/css/libdom.zig
index 57d4af54..318e401c 100644
--- a/src/css/libdom.zig
+++ b/src/css/libdom.zig
@@ -28,4 +28,8 @@ pub const Node = struct {
     pub fn tag(n: Node) ![]const u8 {
         return try parser.nodeName(n.node);
     }
+
+    pub fn attr(n: Node, key: []const u8) !?[]const u8 {
+        return try parser.elementGetAttribute(parser.nodeToElement(n.node), key);
+    }
 };
diff --git a/src/css/libdom_test.zig b/src/css/libdom_test.zig
index 5a952cfc..0e5a255d 100644
--- a/src/css/libdom_test.zig
+++ b/src/css/libdom_test.zig
@@ -36,11 +36,10 @@ test "matchFirst" {
         html: []const u8,
         exp: usize,
     }{
-        .{
-            .q = "address",
-            .html = "<body><address>This address...</address></body>",
-            .exp = 1,
-        },
+        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
+        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
+        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
+        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
     };
 
     for (testcases) |tc| {
@@ -70,11 +69,10 @@ test "matchAll" {
         html: []const u8,
         exp: usize,
     }{
-        .{
-            .q = "address",
-            .html = "<body><address>This address...</address></body>",
-            .exp = 1,
-        },
+        .{ .q = "address", .html = "<body><address>This address...</address></body>", .exp = 1 },
+        .{ .q = "#foo", .html = "<p id=\"foo\"><p id=\"bar\">", .exp = 1 },
+        .{ .q = ".t1", .html = "<ul><li class=\"t1\"><li class=\"t2\">", .exp = 1 },
+        .{ .q = ".t3", .html = "<ul><li class=\"t1\"><li class=\"t2 t3\">", .exp = 1 },
     };
 
     for (testcases) |tc| {
diff --git a/src/css/match_test.zig b/src/css/match_test.zig
index a37de623..6997a970 100644
--- a/src/css/match_test.zig
+++ b/src/css/match_test.zig
@@ -7,6 +7,7 @@ pub const Node = struct {
     sibling: ?*const Node = null,
 
     name: []const u8 = "",
+    att: ?[]const u8 = null,
 
     pub fn firstChild(n: *const Node) !?*const Node {
         return n.child;
@@ -23,6 +24,10 @@ pub const Node = struct {
     pub fn tag(n: *const Node) ![]const u8 {
         return n.name;
     }
+
+    pub fn attr(n: *const Node, _: []const u8) !?[]const u8 {
+        return n.att;
+    }
 };
 
 const Matcher = struct {
@@ -60,7 +65,22 @@ test "matchFirst" {
     }{
         .{
             .q = "address",
-            .n = .{ .name = "body", .child = &.{ .name = "address" } },
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
             .exp = 1,
         },
     };
@@ -89,7 +109,22 @@ test "matchAll" {
     }{
         .{
             .q = "address",
-            .n = .{ .name = "body", .child = &.{ .name = "address" } },
+            .n = .{ .child = &.{ .name = "body", .child = &.{ .name = "address" } } },
+            .exp = 1,
+        },
+        .{
+            .q = "#foo",
+            .n = .{ .child = &.{ .name = "p", .att = "foo", .child = &.{ .name = "p" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "t1" } } },
+            .exp = 1,
+        },
+        .{
+            .q = ".t1",
+            .n = .{ .child = &.{ .name = "p", .sibling = &.{ .name = "p", .att = "foo t1" } } },
             .exp = 1,
         },
     };
diff --git a/src/css/selector.zig b/src/css/selector.zig
index 0ce92099..06b95937 100644
--- a/src/css/selector.zig
+++ b/src/css/selector.zig
@@ -165,9 +165,21 @@ pub const Selector = union(enum) {
     },
     pseudo_element: PseudoClass,
 
+    // returns true if s is a whitespace-separated list that includes val.
+    fn contains(haystack: []const u8, needle: []const u8) bool {
+        if (haystack.len == 0) return false;
+        var it = std.mem.splitAny(u8, haystack, " \t\r\n"); // TODO add \f
+        while (it.next()) |part| {
+            if (std.mem.eql(u8, part, needle)) return true;
+        }
+        return false;
+    }
+
     pub fn match(s: Selector, n: anytype) !bool {
         return switch (s) {
             .tag => |v| n.isElement() and std.ascii.eqlIgnoreCase(v, try n.tag()),
+            .id => |v| return n.isElement() and std.mem.eql(u8, v, try n.attr("id") orelse return false),
+            .class => |v| return n.isElement() and contains(try n.attr("class") orelse return false, v),
             else => false,
         };
     }
