Applying CSS style to an identifier element when the beginning of its name remains identical and the end changes

Question

In WordPress, the blog post title is usually formatted using an ID element consisting of a prefix, such as a “post” that never changes, followed by a variable numeric suffix created by WordPress corresponding to a sequence number that is unique to each post.

In a single.php file for a WordPress theme using html 5 (but the problem is the same as HTML 4), the code for the blog title looks like this:

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

This generates the following html, say:

<article id="post-5434">

I'm having difficulty applying a style to an identifier, because if I'm not mistaken, there seems to be no way to apply a style to an element when part of its name changes. In this case, I need 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;
}

to apply the above styles to descendants of the identifier # post- [serial number].

In this case, adding a class (say, <article id="post-[sequential number]" class="blog-post">to the identifier will not work, as it position:relativeshould be applied to the block element.

, (, <div class="blog-post">) # - [ ] . html 5 , div, , , .

index.html style.css( WordPress) , (.. # post-5434 ' html #post ( "position: absolute" ) css): . , ul.

UPDATE , . . .

Answer 1

@ Sotiris - CSS. , WordPress, class="post" HTML,

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

HTML-:

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

CSS:

.post {
    position: relative;
}

/* and so on... */

CSS , IE 6.

Edit:

(, <article id="post-[sequential number]" class="blog-post"> ) , position:relative .

<article> . , CSS:

article {
    display: block;
}

HTML5- reset , Eric Meyers, .

Answer 2

, div[id*='post-'] { ... } div[id^='post-'] { ... }

div , . div id, .

: http://jsfiddle.net/Lx8tW/2/

Answer 3

Instead of just adding a message class to the article, you really should use:

<?php post_class(); ?>

This will give you a class of messages along with a number of others for targeting sticky messages, custom message types, attachments, custom pages ...