RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 04:17:35 +00:00
Code Issues Activity Actions

LibHTML: Support the :first-child and :last-child pseudo classes

Browse source
This commit is contained in:
Andreas Kling 2019-12-16 19:34:52 +01:00
parent 870df4a8c6
commit c1474e594e
6 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Base/home/anon/www/first-child.html Normal file
View file

@ -0,0 +1,24 @@
<html>
<head>
<title>:first-child test</title>
<style>
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text is selected!</p>
<p>This text isn't selected.</p>
</div>
<div>
<h2>This text isn't selected: it's not a `p`.</h2>
<p>This text isn't selected.</p>
</div>
</body>
</html>

23
Base/home/anon/www/last-child.html Normal file
View file

@ -0,0 +1,23 @@
<html>
<head>
<title>:last-child test</title>
<style>
p:last-child {
color: lime;
background-color: black;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>This text isn't selected.</p>
<p>This text is selected!</p>
</div>
<div>
<p>This text isn't selected.</p>
<h2>This text isn't selected: it's not a `p`.</h2>
</div>
</body>
</html>

2
Base/home/anon/www/welcome.html
View file

@ -24,6 +24,8 @@ h1 {
<p>Some small test pages:</p> <p>Some small test pages:</p>
<ul> <ul>
<li><a href="small.html">small</a></li> <li><a href="small.html">small</a></li>
<li><a href="first-child.html">:first-child</a></li>
<li><a href="last-child.html">:last-child</a></li>
<li><a href="form.html">form</a></li> <li><a href="form.html">form</a></li>
<li><a href="borders.html">borders</a></li> <li><a href="borders.html">borders</a></li>
<li><a href="css.html">css</a></li> <li><a href="css.html">css</a></li>

2
Libraries/LibHTML/CSS/Selector.h
View file

@ -20,6 +20,8 @@ public:
None, None,
Link, Link,
Hover, Hover,
FirstChild,
LastChild,
}; };
PseudoClass pseudo_class { PseudoClass::None }; PseudoClass pseudo_class { PseudoClass::None };

8
Libraries/LibHTML/CSS/SelectorEngine.cpp
View file

@ -27,6 +27,14 @@ bool matches(const Selector::SimpleSelector& component, const Element& element)
if (!matches_hover_pseudo_class(element)) if (!matches_hover_pseudo_class(element))
return false; return false;
break; break;
case Selector::SimpleSelector::PseudoClass::FirstChild:
if (element.previous_element_sibling())
return false;
break;
case Selector::SimpleSelector::PseudoClass::LastChild:
if (element.next_element_sibling())
return false;
break;
} }
switch (component.attribute_match_type) { switch (component.attribute_match_type) {

4
Libraries/LibHTML/Parser/CSSParser.cpp
View file

@ -321,6 +321,10 @@ public:
simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::Link; simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::Link;
else if (pseudo_name == "hover") else if (pseudo_name == "hover")
simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::Hover; simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::Hover;
else if (pseudo_name == "first-child")
simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::FirstChild;
else if (pseudo_name == "last-child")
simple_selector.pseudo_class = Selector::SimpleSelector::PseudoClass::LastChild;
} }
return simple_selector; return simple_selector;