Change css by name / url (No ID or class)

Asked

Viewed 308 times

0

I wanted to know a script that when seeing link and name in html page changes the style...

I need to get a script that allows me to put some links and comment names or just one of the 2, I would need a place in this script for me to put my custom css for each link/name, and if I can customize it is even better, for me to put about 20 with the same css together and the others apart

or

A script that puts an ID for names

Detailing: It’s for blog comments, wanted to differentiate ADM, Members and visitors, so before creating the Tyles would need to be able to make this possible

Below is the pattern of how the current links are (for outsiders): every comment has the same class="fn" changes for everyone, in the same way that if you try to put an id on the link help me...

<cite class="fn">
<a href="LINK" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
</cite>
  • I don’t know if it helps at first because the question got a little fuzzy, but you can use CSS that way: a[title="Gabriel Miller"] { /* seu css */ }

  • it didn’t work no, maybe it got a little confused the question because I tried to explain perfectly what I wanted...

  • You wanted to call the script based on which of the link attributes?

1 answer

3


Come on, from what I understand you need to first create the classes that will give life to everything, with the classes created now you need to check through the link and add to each 'job' your respective class, I will take into account that the link there is a word with the post.

jQuery(document).ready(function(){
  $( "a" ).each(function() {
    switch($(this).attr('href')){
      case 'administrador':
        $( this ).parent().parent().addClass( "adm" );
      break;
      case 'moderador':
        $( this ).parent().parent().addClass( "mod" );
      break;
      case 'membro':
        $( this ).parent().parent().addClass( "memb" );
      break;
      
    }
    
  });
});
.container{
  float:left;
  width: 100%;
  height: 50px;
  background: #CCC;
  margin-bottom: 10px;
}

.adm{
  border: 3px solid red;
}

.mod{
  border: 3px solid gold;
}

.memb{
  border: 3px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <cite class="fn">
    <a href="moderador" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>
<div class="container">
  <cite class="fn">
      <a href="administrador" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>
<div class="container">
  <cite class="fn">
      <a href="membro" rel="nofollow" target="_blank" title="Gabriel Miller">Gabriel Miller</a>
  </cite>
</div>

If I missed something or not clarified correctly, can comment below.

  • You’re the guy Matthew thank you so much

Browser other questions tagged

You are not signed in. Login or sign up in order to post.