Pass database ids in css

Question

Good afternoon. I want to change the css of a div whose id is equal to the id coming from a database. How can I do this? Can I use php in css? I want to pass the id where it is ? HTML

<div class="div_grande">
                        <?php
                            $sql = "SELECT idr, nome, video, img1, img2, img3, img4, img5, img6, telefone, morada, descricao, site FROM restaurantes WHERE fk_lingua = 1 AND fk_distrito = 3";
                            $result = $conn->query($sql);

                            if ($result->num_rows > 0) {
                                // output data of each row
                                while($row = $result->fetch_assoc()) { ?>
                                    <div class="conteudo_cima">
                                        <img class="img_cima" src="<?php echo $row['img1']; ?>">
                                        <div class="texto">
                                            <h1><?php echo $row['nome']."<br>";?></h1>
                                            <?php echo $row['descricao']."<br>";?>
                                            <?php echo $row['morada']."<br>";?>
                                            <?php echo $row['telefone']."<br>";?>
                                            <a href="http://<?php echo $row['site'];?>" target="_blank"><?php echo $row['site'];?></a>
                                        </div>
                                        <?php $id = $row['idr']; ?>
                                        <div class="seta">
                                            <img id="trigger" src="imagens/expand.png" onclick="abreInfo(event, $id)">
                                        </div>
                                    </div>
                                    <div id="<?php echo $id; ?>">
                                        <div class="video">
                                             <iframe src="<?php echo $row['video']; ?>"></iframe> 
                                        </div>
                                        <div class="galeria">
                                        <!-- GALERIA -->
                                        </div>
                                    </div>
                        <?php }
                            } else {
                                echo "0 resultados";
                            }
                        ?>
                    </div>

css

.?{
    position: relative;
    /*background-color: brown;*/
    width: 98%;
    margin-left: 1%;
    display: none;
}
.? .video{
    /*background-color: blue;*/
    position: relative;
    height: 100%;
    width: 50%;
}
.? .video iframe{
    height: 200px;
    width: 80%;
    margin-left: 10%;
}

JQUERY

function abreInfo(event, id){
            event.preventDefault();
            $("#"+id).toggle("slow");
        }

Answer 1

You can do it like this:

CSS:

.id-da-bd {
   background-color: red;
}

HTML: Note that you should not use numeric id’s

<div id="id_2" data-id="2" class="<?php if($id_da_bd == 2) {echo 'id-da-bd'; } ?>"></div>

Answer 2

You can use a concatenation and create a pattern that you will then use in css using a selector that tells you that the id starts with the word.

Ex:

you have 3 ids

video_1
video_2
video_3

To select the Divs with this id you would have to use it like this

div[id^=video]{
    position: relative;
    /*background-color: brown;*/
    width: 98%;
    margin-left: 1%;
    display: none;
}
div[id^=video] .video{
    /*background-color: blue;*/
    position: relative;
    height: 100%;
    width: 50%;
}
div[id^=video] .video iframe{
    height: 200px;
    width: 80%;
    margin-left: 10%;
}

More information here:

https://www.w3.org/TR/css3-selectors/#attribute-substrings

And your dad would be

function abreInfo(event, id){
            event.preventDefault();
            $("#video_"+id).toggle("slow");
        }