Skip to content

[selectors-5] add new selector immediate-adjecent-child #2568

@Meteor0id

Description

@Meteor0id

I am missing sort of the immediate sibling selector but for children instead of siblings.

Something like article ~> p

A theoretical article ~> p:first-of-type::first-letter would solve the following difficulty I encountered, for which I could come up with not other elegant method.

https://jsfiddle.net/r0k0eoza/24/

<div class="wrap_page">
<div class="some_other_wrapper">
<article>
  <header>
  <p>
  This text should NOT have its first letter selected
  </p>
</header>
<img src="test.jpg" alt="some element of another type to demonstrate something standing in the way of an easy solution">
  <p>
  This text should have its first letter selected
  </p>
  <p>
  This text should NOT have its first letter selected
  </p>
  <main>
  <p>
  This text should NOT have its first letter selected
  </p>
  </main>
  <p>
  This text should NOT have its first letter selected
  </p>
  <p>
  This text should NOT have its first letter selected
  </p>
  <section>
    <p>
  This text should NOT have its first letter selected
  </p>
  </section>
  <footer>
    <p>
  This text should NOT have its first letter selected
  </p>
  </footer>
</article>
</div>
<footer>
  <p>
  This text should NOT have its first letter selected
  </p>
</footer>
</div>
<article>
  <p>
   Just to be complete, this one should be selected
  </p>
</article>

.wrap_main p:first-of-type::first-letter, article p:first-of-type::first-letter { color: red; }

Edited because I wrote the first example of the issue without coffee. (messed up)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions