Question

In WordPress, the title of a blog post will usually be formatted using an ID element composed of a prefix such as ‘post’, that never varies, followed by variable numerical suffix generated by WordPress, corresponding to the sequential post number that is unique for each post.

In the WordPress theme single.php file, using html 5 (but the issue is the same with HTML 4), the code for the blog post title would look as follows:

<article id="post-<?php the_ID(); ?>" role="main">

This generates the following html, say:

<article id="post-5434">

I’m having difficulties applying a style to the ID, because unless I’m mistaken there doesn’t seem to be a way of applying a style to an element when part of its name varies. In this instance, what I need to do is to style the ID as follows:

#post-[sequential number] {
    position: relative;
}

#post-[sequential number] blockquote,#post-[sequential number] ul,#post-[sequential number] ol {
    color: #555;
    margin: 0 14px 5px;
    line-height: 1.5;
}

#post-[sequential number] ul li,.entry ul li {
    list-style-type: disc;
    margin: 0 20px 5px;
}

#post-[sequential number] ol li {
    list-style: decimal;
    margin: 0 20px 5px;
}

#post-[sequential number] blockquote {
    font-style: italic;
    border-left: 1px solid #ccc;
    margin-left: 21px;
    padding-left: 10px;
}

in order to apply the styles listed above to descendants of the #post-[sequential number] ID.

In this instance, adding a class (say, <article id="post-[sequential number]" class="blog-post"> to the ID wouldn’t work, since position:relative has to be applied to a block element.

Of course, this result could be easily achieved by adding an extra block element (say, <div class="blog-post">) in between #post-[sequential number] and its descendants, and applying the desired styles to it. But the whole point of using html 5 is to remove unnecessary div elements to make for more semantic markup, so I’d like to find a solution that works without this.

I’ve saved a working copy of the plain index.html and style.css files (without the WordPress markup) in my sandbox that reflect the above description (i.e., with the ID ‘#post-5434’ in the html and #post (with ‘position:absolute’) in the css): they can be accessed here. As you can see, obviously, the desired styles aren’t applied to the descendant blockquote and ul elements.

UPDATE
There are three possible solutions, all equally valid and appropriate in certain circumstances. See below.

Answer 1

@Sotiris’ answer is the way to go in CSS. However, if you can edit your WordPress theme, you could add class="post" to the HTML, e.g

<article class="post" id="post-<?php the_ID(); ?>" role="main">

To produce this HTML:

<article class="post" id="post-5434">

Then use the class in your CSS:

.post {
    position: relative;
}

/* and so on... */

This CSS has the advantage of working in IE 6.

Edit:

In this instance, adding a class (say, <article id="post-[sequential number]" class="blog-post"> to the ID) wouldn’t work, since position:relative has to be applied to a block element.

<article> is a block-level element. If it’s not showing up as such in your browser, pop this into your CSS file:

article {
    display: block;
}

HTML5-aware reset stylesheets like Eric Meyer’s do this.