CODEWITHSUNDEEP
phphtmlcsssql
oversoon
oversoon

Reputation: 360

CSS on 'a' class in SQL call

Is there a different way to reference an 'a class' within an SQL call for separate .css files? I can't get my CSS to style a link(3rd line from bottom in function) Edit: Seems like CSS being overruled error, 2nd picture

chrome tools

dev tools css

CSS;

.toggleFollow {
  color: blue;
  text-decoration: underline;
  cursor: pointer;
}

Function;

  function displayTweets($type) {

    global $link;

    if ($type == 'public'){
      $whereClause = "";
    }

    $query = "SELECT * FROM tweets ".$whereClause." ORDER BY 'datetime' DESC LIMIT 10";

    $result = mysqli_query($link, $query);

    if (mysqli_num_rows($result) == 0) {
      echo "No Tweets";
    } else {
      while ($row = mysqli_fetch_assoc($result)) {

        $userQuery = "SELECT * FROM users WHERE id = ".mysqli_real_escape_string($link, $row['userid'])." LIMIT 1";
        $userQueryResult = mysqli_query($link, $userQuery);
        $user = mysqli_fetch_assoc($userQueryResult);

        echo "<div class='tweet'><p><strong>".$user['email']." </strong><span class='time'> - ".time_since(time() - strtotime($row['datetime']))." ago</span></p>";

        echo "<p>".$row['tweet']."</p>";
        echo "<p><a class='toggleFollow' data-userid='".$row['userid']."'>Follow</a></p></div>";
      }
    }

Upvotes: 0

Views: 200

Answers (2)

DesignMonkeyJim
DesignMonkeyJim

Reputation: 1935

class'toggleFollow'

should be

class='toggleFollow'

Update - you need to look at CSS Specificity as @Obsidian mentioned

.tweet a.toggleFollow {
     color: blue;
}

You can also use !important

.tweet a.toggleFollow {
     color: blue!important;
 }

Upvotes: 2

Obsidian Age
Obsidian Age

Reputation: 42314

The problem is that you're echoing <a class'toggleFollow'>, which is invalid markup.

In order for the CSS selector .toggleFollow to correctly target it, you need to add the equals sign after class:

<a class='toggleFollow'>

You can validate that you have valid markup with the W3C Validation Service (which supports direct input), which will actually warn you of missed equals signs for attribute values:

Have you forgotten the "equal" sign marking the separation between the attribute and its declared value? Typical syntax is attribute="value".

Assuming this does not resolve the issue, there are only four possible other causes of the problem. Here are the four possible problems, and their respective solutions:

  • The most likely culprit is that you have cached the old HTML markup. This can be resolved by holding CTRL and pressing F5, which will refresh the DOM. This will add the equals sign to the markup, and also update the link to the CSS file if it has been modified.

  • It's possible that the CSS itself got cached, before you added the valid .toggleFollow selector. You can refresh the CSS cache (which is separate to the browser cache!) by holding SHIFT while clicking on the refresh icon.

  • Another culprit could be one of specificity. Ensure that the .toggleFollow selector is not being overridden by a selector with higher specificity. You can check the specificity with the F12 Developer Tools. The lines with strikes through them are being overridden.

  • Least likely, it's possible that your CSS file isn't actually being referenced incorrectly. Ensure that you're actually loading it correctly by using the F12 Developer Tools to see if you are getting a 404 when attempting to load it.

Upvotes: 3

Related Questions