CODEWITHSUNDEEP
phphtmlcsscss-selectors
user2656943
user2656943

Reputation:

How can I target this HTML code individually in CSS?

I have two sets of text that need to be inline with each other but at the moment one is placed higher than the other. The two sets of text share the same CSS code so when I edit it, both are affected. However, I would like to target only one of the text; Is there a way of doing this?

Here is the HTML and CSS:

<div id="mi-slider" class="mi-slider">
<?

$result = $mysqli->query("SELECT * FROM stock");
while($obj = $result->fetch_object())
{
    if($obj->id&1)
    echo "<ul>";

?>
<li class="<?=$obj->orientation=='landscape'?'landscape':'portrait'?>" id="list">
    <a href="#"><img src="./img/<?=$obj->description=='unframed'?$obj->poster_no:$obj->poster_no.'_frame'?>.jpg" alt=""></a>
    <h4><?= $obj->description=="unframed"?"Unframed Poster - 750mm x 500mm":"Framed Poster - 790mm x 540mm"?><br />&pound;<?=$obj->price?> each</h4>
</li>

The CSS code:

.mi-slider ul li h4 {
display: inline-block;
font-family: HelveticaNeueRegular;
font-weight: 100;
font-size: 12px;
color: #a34235;
padding: 0 0 0;
text-align: left;
margin-top: 20px;
margin-left: 10px;
float: left;
}

Upvotes: 1

Views: 141

Answers (3)

Rohit Pareek
Rohit Pareek

Reputation: 1563

Use this:

li:first-child h4
{
    your custum css
}

With this, the CSS rules only apply to the h4 tag of first li instead of all li.

Upvotes: 0

Dale
Dale

Reputation: 955

If you want to target the second list items H4, you can use the nth-child selector, as below:

.mi-slider ul li:nth-child(2) h4
{ your css }

Upvotes: 1

avrahamcool
avrahamcool

Reputation: 14094

you can use unique ID for each special element, then specify your CSS via '#' selector.

if the special CSS need to be applied to the first element, consider using the ':first-child' selector. its cleaner. but, if you want to target the second element (or later) consider that the 'nth-child' selector is not suported in older browser (like IE8)

Upvotes: 2

Related Questions