Develop Reference

How to combine 2 css file avoiding clash between the 2?

I am working on 2 separate html file for the same project, eventually those files will go into the home page. My problem is the css files, as they have many in common element, which however they look different and will clash.
My question is, what is the best way to merge this css file so not to have any issue?
################## THIS IS CSS FILE 1 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
a {
text-decoration: none;
font-size: 12px;
}
li {
padding: 10px;
cursor: pointer;
background-color: transparent;
color: #ffffff;
}
li:hover {
background-color: #87cefa;
color: #003580;
}
h4 {
text-align: center;
font-size: 33px;
font-weight: 333;
color: #003580;
padding: 12px
}
/* ---------------------------------------
-------------- COMPONENTS ----------------
----------------------------------------*/
label {
padding: 6px;
font-size: 15px;
font-weight: 700;
text-align: center;
width: 120px;
color: #000
}
ul {
list-style-type: none;
padding-left: 21px;
}
ul.horizontal,
ul.horizontal a {
display: flex;
list-style-type: none;
color: white;
}
button {
background-color: #ffffff;
border: 1px solid #003580;
color: #003580;
align-items: center;
border-radius: 6px;
padding: 0 25px;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap;
resize: none;
outline: 0;
width: 180px;
height: 45px
}
button:hover {
background-color: #87cefa;
color: #003580;
}
i {
margin: 0 12px 0 12px;
}
img {
max-width: 150px;
max-height: 150px
}
input {
width: 150px;
align-self: center;
font-size: 15px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
resize: none;
outline: 0;
background-color: transparent;
border: transparent;
text-align: center
}
::placeholder {
color: #FFFFFF;
opacity: 1;
}
select,
select.white {
font-size: 15px;
background-color: transparent;
border: transparent;
font-weight: 700;
padding: 6px;
cursor: pointer;
}
select.white {
color: #FFFFFF;
}
select.white:focus {
color: #003580;
}
/* ---------------------------------------
--------------- LAYOUT -----------------
----------------------------------------*/
header {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
padding: 9px;
background-color: #003580;
height: 45px;
}
.content_container {
display: flex;
flex-wrap: nowrap
}
.side_navbar {
height: 90vh;
flex: 1;
background-color: #003580;
border-bottom: 6px solid #003580
}
.right_content {
display: block;
flex: 4
}
.all_sections_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.all_sections_container section {
margin-bottom: 18%;
display: none;
width: 90%;
height: 90%;
}
.profile_wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.properties_wrapper {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap
}
.properties_wrapper div {
font-size: 12px;
font-weight: 333;
text-align: center
}
.utilities_wrapper,
.favorites_wrapper,
.settings_wrapper,
.offers_wrapper,
.messages_wrapper {
display: flex;
flex-direction: column;
align-items: center;
flex-wrap: nowrap;
}
.settings_wrapper button,
.utilities_wrapper button {
margin-top: 21px;
}
################## THIS IS CSS FILE 2 ##################
#import url(https://fonts.googleapis.com/css2?family=Roboto&display=swap);
#import url(https://fonts.googleapis.com/css2?family=Lato&display=swap);
* {
margin: 0;
padding: 0;
font-family: Roboto, sans-serif
}
html {
height: 100%
}
body {
height: 100%;
display: flex;
flex-direction: column;
visibility: visible
}
h4 {
margin: 9px;
padding-left: 9px;
padding-top: 6px;
border-top: 1px solid #eef0f1
}
h5 {
color: #fff;
font-size: 12px
}
h5.h5_dropdown {
margin: 5px 0 -5px 0
}
label {
padding-left: 12px;
cursor: pointer
}
button {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
cursor: pointer;
min-width: 100px
}
button.red {
cursor: pointer;
background-color: #e00000;
color: #fff;
border: thin solid #e00000
}
button.red:hover {
background-color: #f23d3d
}
input[type=checkbox] {
cursor: pointer
}
input[type=number],
input[type=text] {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 8px;
height: 45px;
text-align-last: center;
margin-right: 10px;
resize: none;
outline: 0;
min-width: 300px;
text-align: center;
cursor: auto
}
select {
font-size: 16px;
font-weight: 700;
color: #000;
background-color: #fff;
border: 0;
border-radius: 9px;
height: 45px;
text-align-last: center;
resize: none;
outline: 0;
cursor: pointer;
padding: 3px;
margin: 6px
}
.select_city {
margin-right: -15px
}
.search_box_category_selector_flex_container {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
max-width: 51%;
margin-left: 21%
}
.search_box_category_selector_flex_container div {
border: 1px solid gray;
flex: 1;
font-size: 12px;
font-weight: 333;
border-radius: 6px;
padding: 12px;
cursor: pointer;
margin-bottom: -6px;
margin-right: 3px
}
.search_box_flex_main_container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
height: 99px;
background-color: #2b2d2e;
align-items: center
}
.city_select_dropdown_container {
z-index: 2
}
.buildings_select_container {
z-index: 1
}
.bedroom_range_form_container,
.more_form_container,
.price_range_form_container {
position: absolute
}
.price_range_frame {
display: flex;
background-color: #fff;
justify-content: center;
align-items: center;
border: thin solid #000;
border-radius: 6px;
padding: 6px 0 6px 7px
}
.bedroom_range_frame {
border: thin solid #000;
background-color: #fff;
padding: 6px 0 6px 8px;
border-radius: 6px
}
.more_form {
color: #000;
background-color: #fff;
display: flex;
flex-direction: column
}
.more_form_container {
margin: 4px 4px;
padding: 4px;
height: 350px;
overflow-x: hidden;
overflow-y: auto;
text-align: justify;
border-bottom: 1px solid #000;
border-left: 1px solid #000
}
.more_form_container div {
padding-left: 12px
}
.more_form_bottom_buttons_container {
display: flex;
justify-content: center;
padding: 15px
}
est way to merge this css file so not to have any issue?

I would recommend trying this tool
CSS Compressor & Minifier
It has lots of options, you can compress and/or minify CSS.
Copy both CSS files into a CSS input
Turn on Sort selectors and properties
Obtain output
Manually remove duplicates
Re-enter input
Compress or minify your output

CSS) Why is my 'hover' not working? I searched google but I couldn't fix it

I first set .submenu to display:none;. And then I set .recipe:hover .submenu{display:block;} . When I hover over the .recipe, I wanted to make .submenu display: block;. But it isn't working. Can you tell me why it isn't working? I can't really figure this out. Is using javascript the only way I can solve this problem? Here's my code. Thank you
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>

I'm not the best with this, but I'd say it might have something to do with selecting the .recipe:hover and then selecting .submenu right after it:
.recipe:hover .submenu{
display: block;
}

You need to actually add the recipe class onto an element, then in your CSS, you need to add ~ to signify that the elements are on the same level in the DOM.
I have also made some modifications to the CSS in order to make sure the submenu does not disappear.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a + a {
box-shadow: -4px -3px 0 -3px rgb(155, 155, 155);
}
.submenu {
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a {
color: black;
text-decoration: none;
flex-grow: 1;
height: 30px;
padding-bottom: 6px;
}
.recipe:hover ~ .submenu {
display: block;
}
.submenu:hover {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
Recipe
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
For more information on the general sibling combinator (~), please read the MDN docs.

As NoahRGB said, CSS selectors cannot have that syntax.
This:
.recipe:hover .submenu
will not work.
If you want it to select the hover of both the submenu and the recipe classes, "chain" them:
.recipe.submenu:hover
being sure not to put any spaces between .recipe and .hover.
If you wanted to set it to display: block; when the .recipe is hovered and the .submenu is not hovered, simply put display: block; in the .submenu class selector independently from the .recipe:hover selector like this:
.submenu {
...
display: block;
}
.recipe:hover {
...
display: block;
}

.recipe:hover .submenu{display:block;} implies that your .submenu element is a child of .recipe.
You need to change your markup to something like:
<a class="recipe" href="Recipe.html">
Recipe
<span class="submenu">
coffee<
</span>
</a>
Or, for a fore semantic markup, especially if your sub-menu will receive more items you could do:
<ul class="menu">
<li>
<a class"recipe" href="Recipe.html">Recipe</a>
<ul class="submenu">
<li>coffee</li>
</ul>
</li>
</ul>
and change your css to:
.menu li:hover .submenu { display:block; }

You can absolutely do this in CSS3 now using the ~ adjacent sibling selector.
triggerSelector:hover ~ targetSelector {
display: block;
}
as per the post How to change one element while hovering over another
!DOCTYPE html>
<html>
<meta charset="utf-8">
</html>
<head>
<title>
TEST
</title>
<style>
body{
margin: 0px;
}
#logo{
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title{
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu{
border: 1px solid rgb(155,155,155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(2){
flex-grow: 1;
border-right: 1px solid rgb(155,155,155);
}
a:nth-of-type(3){
flex-grow: 1;
}
.submenu{
background-color: #f2efed;
height: 190px;
font-size: 16px;
font-weight: 300;
padding-top: 10px;
padding-left: 10px;
text-decoration: underline;
position: absolute;
margin-top: 36px;
width: 100%;
display: none;
}
a{
color: black;
text-decoration: none;
}
.recipe:hover ~ .submenu{
display: block;
}
#font-face { font-family: 'IBMPlexSansKR-Light'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff'); font-weight: normal; font-style: normal; }
</style>
</head>
<body>
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<div class="mainmenu">
home
<a class="recipe" href="Recipe.html">Recipe</a>
QNA
<div class="submenu">
coffee
</div>
</div>
</body>
</html>

You simply add ~ between selectors to adjance them together:
.recipe:hover ~ .submenu{
display: block;
}

I would say that you have to style your submenus in a structural way so that when you hover the element they would be visible when you try to hover submenus.
In your case submenu will get hidden if you try to make it visible. I have changed the structure a bit to show the submenu. You can more optimise it.
body {
margin: 0px;
}
#logo {
height: 56px;
padding-top: 15px;
padding-left: 45px;
font-size: 17px;
font-weight: 500;
}
.title {
padding-left: 30px;
padding-bottom: 15px;
}
.mainmenu {
border: 1px solid rgb(155, 155, 155);
text-align: center;
height: 30px;
padding-top: 17px;
padding-bottom: 5px;
font-size: 17px;
font-weight: 400;
display: flex;
list-style-type: none;
margin: 0px;
padding-top: 11px;
}
a:nth-of-type(1) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(2) {
flex-grow: 1;
border-right: 1px solid rgb(155, 155, 155);
}
a:nth-of-type(3) {
flex-grow: 1;
}
.submenu {
position: absolute;
margin-top: 36px;
}
.submenuwrapper {
position: absolute;
background-color: #f2efed;
width: 200px;
height: 190px;
font-size: 16px;
font-weight: 300;
padding: 40px;
text-decoration: underline;
display: none;
}
a {
color: black;
text-decoration: none;
}
.recipe:hover>.submenuwrapper {
display: block;
}
#font-face {
font-family: 'IBMPlexSansKR-Light';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07#1.0/IBMPlexSansKR-Light.woff') format('woff');
font-weight: normal;
font-style: normal;
}
<div id="logo">
<img width=45px src="icons8-solo-cup-100.png">
<span class="title">cafe in my home</span>
</div>
<ul class="mainmenu">
<li>home</li>
<li class="recipe">Recipe
<div class="submenuwrapper">
<div class="submenu">
coffee
</div>
</div>
</li>
<li>QNA</li>
</ul>

You can add !important after your code to make it principal.
.recipe:hover .submenu{
display: block !important;
}
Can you upload the whole code in a codeopen.io? So you can show us exactly what you need.

Css flex display is not aligning vertically the element inside a div [duplicate]

This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I am trying to build a simple card to display a button and a text.
I can't make the alignment proper. perhaps too much overload of css.
it looks like:
I just want the content centered vertically and horizontally with the text and the button below the text
here is the code:
import React from 'react';
import {Button} from 'react-bootstrap';
import './EmptyTile.css';
class EmptyTile extends React.Component {
render() {
return (
<div className="empty-tile">
<h1>{this.props.text}</h1>
<Button bsPrefix="button-empty-tile" href={this.props.url}>Start</Button>
</div>
);
}
}
export default EmptyTile;
and css
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
}
.empty-tile h1 {
font-family: Fredoka One;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: -0.44px;
text-align: center;
color: #cacaca;
padding-left: 15px;
padding-right: 15px;
}
.button-empty-tile {
border-radius: 21px;
background-color: #f4f7f8;
border-color: #cacaca;
font-family: Source Sans Pro;
font-size: 16px;
text-align: center;
color: #cacaca;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
}
Any idea ? the code is very simple

Adding flex-direction: column to .empty-tite should solve the issue.
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
flex-direction: column; // by default, flex-direction is row
}
...
Check out this Code Sandbox link, if this is what you are looking for.

Add flex-direction: column to the container:
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
flex-direction: column;
}
Here a snippet:
.empty-tile {
width: 240px;
height: 360px;
border-radius: 20px;
box-shadow: 0px 8px 18px 0 rgba(0,0,0,0.14);
align-items: center;
text-align: center;
justify-content: center ;
display: flex;
flex-direction:column;
}
.empty-tile h1 {
font-family: Fredoka One;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: -0.44px;
text-align: center;
color: #cacaca;
padding-left: 15px;
padding-right: 15px;
}
.button-empty-tile {
border-radius: 21px;
background-color: #f4f7f8;
border-color: #cacaca;
font-family: Source Sans Pro;
font-size: 16px;
text-align: center;
color: #cacaca;
padding-top: 5px;
padding-bottom: 7px;
padding-left: 20px;
padding-right: 20px;
}
<div class="empty-tile">
<h1>I am an h1 tag!</h1>
<button class="button-empty-tile">And I am a button under it</button>
</div>

Why are my react-bootstrap rows overlapping on mobile?

I am trying to style a Container on mobile, and the contents are overlapping. They look great on desktop, but the Container loses it's height and starts overlapping the contents once it loads on mobile. I've tried so many combinations of margins, heights, paddings, etc and I can't get it to work properly.
Here's my relevant React component. It contains the entire container plus each item.
<Container fluid
onClick={handleRedeemClick}
className="total-services-sold"
>
<Row fluid>
<Col><a className="total-services-sold-num">{props.profile.menu_items.length}</a></Col>
</Row>
<Row fluid>
<Col><a className="services-sold">Services Sold</a></Col>
</Row>
<div className="seperator"></div>
<Row fluid>
<Col className="new-link">Redeem Sales</Col>
</Row>
</Container>
And here's the CSS
.total-services-sold {
/* position: absolute; */
display: flex;
flex-direction: column;
/*justify-content: flex-end;*/
align-items: center;
width: calc(100% - 32px);
height: auto;
padding: 10px;
background: #ffffff;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.13);
margin: 40px 0;
}
.total-services-sold-num {
font-family: "Roboto";
font-style: bold;
font-weight: 500;
font-size: 30px;
line-height: 35px;
color: #000000;
padding-top: 8px;
margin-bottom: 0px;
border: 1px solid #ff0000;
position: relative;
}
.services-sold{
font-family: 'roboto';
font-style: normal;
font-weight: normal;
font-size: 14px;
line-height: 16px;
padding-top: 0px;
margin-top: 0px;
padding-bottom: 8px;
border: 1px solid #ff0000;
position: relative;
}
.new-link {
font-family: "Roboto";
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 22px;
/* identical to box height, or 137% */
text-align: center;
color: #6161ff;
padding-top:12px;
padding-bottom:4px;
position:relative;
}
.seperator {
width: 100%;
border: 1px solid #f2f2f2;
margin-top: 8px;
position:relative;
}
Any advice is greatly appreciated.

Firstly, if you're using bootstrap, you might as well make use of reactstrap classes and spare yourself the hideous CSS writing.
In your total-services-sold add justify-content: space-between as well as min-height: 200px. Also drop the position:relative attribute in your child divs.

Beginner JQuery Toggling classes

I'm working on for a project. I have had a quick go at [coding some buttons(https://codepen.io/ryantinsley/pen/XqOBGb). I have created 2 states. A blue selected class and an outlined deselected class. I want to switch between these two classes each time I click on one of the buttons.
I have tried numerous things in jQuery and some things have worked to a point such as changing h1 text colours, but apart from that nothing seems to work for me.
In short I am looking for the best way to toggle between the two buttons on every click.
Thanks in advance for all you help
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
#star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
#starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#containerselect {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
#h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}
<div id="container">
<div id="star"></div>
<h1>Link</h1>
</div>
<div id="containerselect">
<div id="starselect"></div>
<h1 id="h1select">Link</h1>
</div>

convert your id into class and use toggleClass() of jQuery. Here is an example.
$("#button").on("click", function() {
$(this).children().toggleClass("container containerselect");
$(this).children().children().eq(0).toggleClass("star starselect");
$(this).find("h1").toggleClass(" h1select");
});
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
.star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
.starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.containerselect {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
.h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">
<div class="container">
<div class="star"></div>
<h1>Link</h1>
</div>
</div>

Firstly create css using classes.
Then you can use :
$("#starselect").click(function() {
$(this).removeClass('class2');
$(this).addClass('class1');
});
PS:
1. You can remove or add IDs using attr() function in Jquery. But that is not suggeseted. Because ID defines an element, not its styling.
You can also use toggleClass()

You can try the following solution:
https://codepen.io/anon/pen/jxdQav
jQuery
$('.divlink').on('click', function(e){
$('.divlink').not(this).removeClass('active');
$(this).addClass('active');
})
HTML
<div id="container" class="divlink">
<div id ="star"></div>
<h1>Link</h1>
</div>
<div id="container" class="divlink active">
<div id ="starselect"></div>
<h1 id ="h1select">Link</h1>
</div>
CSS
h1 {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
}
#star {
background-image: url("https://image.ibb.co/mdSJgT/Hollow_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
#container {
padding: 8px 8px;
border: solid 1px;
display: inline-block;
}
#starselect {
background-image: url("https://image.ibb.co/hZ2Uo8/Filled_Star.png");
width: 14px;
height: 14px;
display: inline-block;
}
.active {
padding: 8px 8px;
display: inline-block;
background: #006DEF;
}
#h1select {
font-family: sans-serif;
font-size: 16px;
font-weight: light;
display: inline;
color: white;
}